眾所周知，輪播圖是被廣泛的運用的。
輪播圖我們在很多的網站上都可以看到，例如淘寶、京東這些網站都很常見。
下面開始我們的輪播之旅：
搭建我們的骨架：
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），第二個是時間