众所周知，轮播图是被广泛的运用的。
轮播图我们在很多的网站上都可以看到，例如淘宝、京东这些网站都很常见。
下面开始我们的轮播之旅：
搭建我们的骨架：
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"><</div> 51 <div class="b_right">></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 });
下面是我们的效果图：
时间： 2024-10-15 03:13:02