jQuery入门——实现列表的显示隐藏与实现轮播图

列表的显示与隐藏

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>过滤选择器</title>
 6 <style type="text/css">
 7 </style>
 8 <script type="text/javascript" src="../js/jQuery-3.2.1.js"></script>
 9 <script type="text/javascript">
10     $(function() {
11         $(".myclass:visible").hide();
12         $("a[href='#']").click(function() {
13             if ($(this).text() == "更多") {
14                 $(".myclass:hidden").show();
15                 $(this).html("简化");
16             } else {
17                 $(".myclass:visible").hide();
18                 $(this).html("更多");
19             }
20         });
21     });
22 </script>
23 </head>
24 <body>
25     <ul>
26         <li>联系我们</li>
27         <li>友情链接</li>
28         <li>团队风采</li>
29         <li>个人首页</li>
30         <li class="myclass" style="display: none">更多1</li>
31         <li class="myclass" style="display: none">更多2</li>
32         <li class="myclass" style="display: none">更多3</li>
33         <li>结尾</li>
34         <li><a href="#">更多</a></li>
35     </ul>
36 </body>
37 </html>

轮播图：

html:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <link rel="stylesheet" href="css/style.css" type="text/css">
 7 <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
 8 <script type="text/javascript" src="js/carousel.js"></script>
 9 </head>
10 <body>
11     <div class="bigbox">
12         <ul>
13             <li>1</li>
14             <li>2</li>
15             <li>3</li>
16             <li>4</li>
17             <li>5</li>
18             <li>6</li>
19         </ul>
20         <div class="left">&lt;</div>
21         <div class="right">&gt;</div>
22     </div>
23 </body>
24 </html>

css:

 1 ul, li {
 2     padding: 0;
 3     margin: 0;
 4     list-style: none;
 5 }
 6 
 7 .bigbox {
 8     margin: 0 auto;
 9      700px;
10     overflow: hidden;
11     height: 454px;
12     position: relative;
13     background: url("../images/adver01.jpg");
14 }
15 
16 ul {
17     position: absolute;
18     bottom: 10px;
19     z-index: 100;
20      100%;
21     text-align: center;
22 }
23 
24 ul li {
25     display: inline-block;
26     font-size: 10px;
27     line-height: 20px;
28     font-family: "ST";
29     margin: 0 1px;
30      20px;
31     height: 20px;
32     border-radius: 50%;
33     background: #333333;
34     text-align: center;
35     color: #ffffff;
36 }
37 
38 .left,.right {
39     position: absolute;
40      30px;
41     background: rgba(0, 0, 0, 0.2);
42     height: 50px;
43     line-height: 50px;
44     text-align: center;
45     top: 200px;
46     z-index: 150;
47     font-family: "ST";
48     font-size: 28px;
49     font-weight: bold;
50     cursor: pointer;
51     display: none;
52 }
53 
54 .left {
55     left: 10px;
56 }
57 
58 .right {
59     right: 10px;
60 }
61 
62 li:nth-of-type(1) {
63     background: orange;
64 }

jQuery:

 1 $(document).ready(function(){
 2     var index=0;
 3     var img = Array('images/adver01.jpg','images/adver02.jpg','images/adver03.jpg','images/adver04.jpg','images/adver05.jpg','images/adver06.jpg');
 4     var timer;
 5     play();
 6     $('.bigbox').mouseover(function(){
 7         $(".left,.right").show();
 8         stop();
 9     });
10     $('.bigbox').mouseout(function(){
11         $(".left,.right").hide();
12         play();
13     });
14     $('.right').click(function(){
15         index++;
16         if(index == img.length){
17             index = 0;
18         }
19         display(index);
20     });
21     $('.left').click(function(){
22         index--;
23         if(index == -1){
24             index = img.length-1;
25         }
26         display(index);
27     });
28     function display(index){
29         $('.bigbox').css('background','url("'+img[index]+'")')
30         $('ul li:eq('+index+')').css('background','orange');
31         $('ul li:eq('+index+')').siblings().css('background','#333');
32     }
33     for (var i = 0; i < img.length; i++) {
34         (function(i) {
35             $('ul li:eq('+i+')').click(function(){
36                 index = i;
37                 display(index);
38             });
39         })(i)
40     }
41     function stop(){clearInterval(timer)}
42     function play() {timer = setInterval(function(){
43         index++;
44         if(index == img.length){
45             index = 0;
46         }
47         display(index);
48     },2000)}
49 });