首页 > 代码库 > jQ实现的一个轮播图

jQ实现的一个轮播图

2024-09-23 17:54:41   202人阅读

众所周知，轮播图是被广泛的运用的。

　　轮播图我们在很多的网站上都可以看到，例如淘宝、京东这些网站都很常见。

　　下面开始我们的轮播之旅：

搭建我们的骨架：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5     　　 <title></title>
 6     </head>
 7     <body>
 8 
 9     </body>
10 </html>
11

添加区块：







 1 <div class="banner">
 2         <div class="b_main">
 3             <div class="b_m_pic">
 4                 <ul>
 5                     <li>
 6                         <a>
 7                             <img src="img/1.png" width="100%" height="100%"/><!--这里的宽高是为了占满盒子-->
 8                         </a>
 9                     </li>
10                     <li>
11                         <a>
12                             <img src="img/2.png" width="100%" height="100%"/>
13                         </a>
14                     </li>
15                     <li>
16                         <a>
17                             <img src="img/3.jpg" width="100%" height="100%"/>
18                         </a>
19                     </li>
20                     <li>
21                         <a>
22                             <img src="img/4.jpg" width="100%" height="100%"/>
23                         </a>
24                     </li>
25                     <li>
26                         <a>
27                             <img src="img/5.png" width="100%" height="100%"/>
28                         </a>
29                     </li>
30                     <li>
31                         <a>
32                             <img src="img/6.png" width="100%" height="100%"/>
33                         </a>
34                     </li>
35                 </ul>
36             </div>
37         </div>
38         <!--小圆点-->
39         <div class="b_list">
40             <ul>
41                 <li class="l_click"></li>
42                 <li></li>
43                 <li></li>
44                 <li></li>
45                 <li></li>
46                 <li></li>
47             </ul>
48         </div>
49         <div class="b_btn">
50             <div class="b_left">&lt</div>
51             <div class="b_right">&gt</div>
52         </div>
53     </div>






 


 


 




 接下来是我们的JS代码：




 1  var $li = $(".b_list ul li");//获取.b_list里面的所有li，放到$li这个变量里面
 2         var len = $li.length-1;
 3         var _index = 0;//li的索引
 4         var $img = $(".b_main .b_m_pic li");//同上
 5         var $btn = $(".b_btn div");
 6 
 7         var timer = null;
 8 
 9         //  alert(typeof timer); timer是一个对象
10 
11         $li.hover(function(){
12             $(this).addClass("l_hover");//指向li添加样式
13         },function(){
14             $(this).removeClass("l_hover");//指向li删除样式
15         });
16 
17         //点击事件
18         $li.click(function(){
19             _index = $(this).index();
20             //获取li的下标，改变样式
21             //$li.eq(_index).addClass("l_click").siblings().removeClass("l_click");
22             //获取图片的下标，实现淡入淡出
23             //$img.eq(_index).fadeIn().siblings().fadeOut();
24             play();
25         });
26 
27         //封装函数
28         function play(){
29             //获取li的下标，改变样式
30             $li.eq(_index).addClass("l_click").siblings().removeClass("l_click");
31             //获取图片的下标，实现淡入淡出
32             $img.eq(_index).fadeIn().siblings().fadeOut();
33         }
34 
35         //两边耳朵的点击事件
36             $btn.click(function(){
37                 var index = $(this).index();
38                 if(index) {
39                     _index++;
40                     if (_index > len) {
41                         _index = 0;
42                     }
43                     play();
44                 }else {
45                     _index--;
46                     if(_index < 0){
47                         _index = len;
48                     }
49                     play();
50                 }
51             });
52 
53         //定时轮播
54         function auto(){
55             //把定时器放进timer这个对象里面
56             timer = setInterval(function(){
57                 _index++;
58                 if(_index > len){
59                     _index = 0;
60                 }
61                 play();
62             },2000);
63         }
64         auto();
65 
66         //当我移上d_main的时候停止轮播
67         $(".b_main").hover(function(){
68             clearInterval(timer);
69         },function(){
70             //移开重新调用播放
71             auto();
72         });
73         //当我移上两边耳朵的时候停止轮播
74         $(".b_btn div").hover(function(){
75             clearInterval(timer);
76         },function(){
77             //移开重新调用播放
78             auto();
79         });




下面是我们的效果图：


　　技术分享
jQ实现的一个轮播图






























        

            
                
                  
                
                

                    联系

                    我们