衆所周知，輪播圖是被廣泛的運用的。
輪播圖我們在很多的網站上都可以看到，例如淘寶、京東這些網站都很常見。
下面開始我們的輪播之旅：
搭建我們的骨架：
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> css樣式:
1 <style>
2 *{margin:0;padding:0}
3 ul li{list-style:none}
4 img{margin: 0}
5 </style>
6 <style>
7 .banner{position: relative;width: 1366px;height: 780px;margin: 100px auto;border: 10px solid #009999;border-radius: 15px}
8 .banner .b_main{position: relative;width: 1366px;height: 780px;}
9 .banner .b_main .b_m_pic{position: relative;width: 1366px;height: 780px;}
10 .b_main .b_m_pic li{position: absolute;width: 1366px;height: 780px;top: 0;left: 0;}/*這裡給絕對定位，是為了把li疊在一起*/
11 </style>
12 <style>
13 /*小圓點的樣式*/
14 .b_list ul{position:absolute;right: 40px;bottom: 30px;}/*這裡的ul根據banner定位*/
15 .b_list ul li{width: 20px;height: 20px;float: left;background: #333;margin-left: 20px;border-radius: 50px;
16 border:2px solid white;}
17 .b_list ul .l_hover,.b_list ul .l_click{border:2px solid #333;background: white}
18 /*兩邊耳朵的樣式*/
19 .b_btn div{position: absolute;width: 100px;height: 100px;background: rgba(0,0,0,0.7);font-size: 60px;color: white;text-align: center;line-height: 100px;top: 50%;margin-top: -80px;cursor: pointer;}
20 .b_btn .b_left{left:0;border-radius: 50%}/*移到左邊*/
21 .b_btn .b_right{right:0;border-radius: 50%}/*移到右邊*/
22 </style> 接下來是我們的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 }); 下面是我們的效果圖：
總結：
1、圖檔、小圓點、兩邊的耳朵要使用position：absolute絕對定位，進行疊加。
注：絕對定位要根據父級元素進行定位，父級元素要加上position: relative;
2、根據索引值改變圖檔，達成切圖
注：實作淡入淡出分别是fadeIn和fadeOut兩個jq方法
siblings() 方法傳回被選元素的所有同級元素。同級元素是共享相同父元素的元素。
3、定時器（實作輪播）：
setInterval()是開始播放，clearInterval()是關閉，有始有終嘛~~~~~
定時器有兩個參數，第一個是函數方法（可以另寫一個方法，寫上方法名調用，也可以直接寫一個function），第二個是時間
轉載于:https://www.cnblogs.com/self-discipline/p/6879548.html