輪播圖也稱為焦點圖，是網頁中比較常見的網頁特效。
功能需求：
1.鼠標經過輪播圖模塊，左右按鈕顯示；鼠標離開時隱藏；
2.點擊右側按鈕一次，圖片往左播放一張，以此類推，左側按鈕同理；
3.圖片播放的同時，下面小圓圈模塊跟隨一起變化；
4.點擊小圓圈，可以播放相應圖片；
5.鼠標不經過輪播圖，輪播圖也會自動播放圖片；
6.鼠標經過，輪播圖模塊停止自動播放。
效果：
代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>輪播圖</title> 6 <link rel="stylesheet" href="index.css"> 7 <script src="js/animate.js"></script> 8 <script src="js/index.js"></script> 9 </head> 10 <body> 11 <div class="w"> 12 <div class="main"> 13 <div class="focus f1"> 14 <!-- 左側按鈕 --> 15 <a href="javascript:;" class="arrow-l"><</a> 16 17 <!-- 核心的圖片滾動區域 通過ul來布局--> 18 <ul> 19 <li> 20 <a href="#"><img src="img/focus1.jpg" alt=""></a> 21 </li> 22 <li> 23 <a href="#"><img src="img/focus2.jpg" alt=""></a> 24 </li> 25 <li> 26 <a href="#"><img src="img/focus3.jpg" alt=""></a> 27 </li> 28 <li> 29 <a href="#"><img src="img/focus4.jpg" alt=""></a> 30 </li> 31 <li> 32 <a href="#"><img src="img/focus5.jpg" alt=""></a> 33 </li> 34 <li> 35 <a href="#"><img src="img/focus6.jpg" alt=""></a> 36 </li> 37 </ul> 38 <!-- 小圓圈 --> 39 <ol class="circle"></ol> 40 <!-- 右側按鈕 --> 41 <a href="javascript:;" class="arrow-r">></a> 42 43 </div> 44 </div> 45 </div> 46 </body> 47 </html>
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 a{ 6 text-decoration: none; 7 } 8 li{ 9 list-style: none; 10 } 11 /* .main{ 12 13 margin: 100px auto; 14 background-color: gray; 15 } */ 16 .focus{ 17 margin: 100px auto; 18 position: relative; 19 width: 500px; 20 height: 300px; 21 background-color: #fff; 22 overflow: hidden; 23 } 24 .arrow-l, 25 .arrow-r{ 26 display: none; 27 position: absolute; 28 top: 50%; 29 margin-top: -25px; 30 width: 35px; 31 height: 50px; 32 background-color: rgba(0,0,0,.3); 33 text-align: center; 34 line-height: 50px; 35 color: #fff; 36 font-family: 'icomoon'; 37 font-size: 20px; 38 cursor: pointer; 39 z-index: 999; 40 } 41 .arrow-l:hover{ 42 background-color: rgba(0,0,0,.6); 43 color: gray; 44 } 45 .arrow-r:hover{ 46 background-color: rgba(0,0,0,.6); 47 color: gray; 48 } 49 .arrow-r{ 50 right: 0; 51 } 52 .focus ul{ 53 /* 添加定位才可以移動 */ 54 position: absolute; 55 top: 0; 56 left: 0; 57 width: 700%; 58 } 59 .focus ul li{ 60 float: left; 61 } 62 img{ 63 width: 500px; 64 height: 300px; 65 z-index: -999; 66 } 67 .circle li{ 68 float: left; 69 width: 8px; 70 height: 8px; 71 border: 2px solid rgba(218, 218, 218, 0.5); 72 border-radius: 50%; 73 margin-left: 6px; 74 cursor: pointer; 75 } 76 .circle{ 77 position: absolute; 78 left: 50px; 79 top: 280px; 80 } 81 .current{ 82 background-color: #fff; 83 }
1 function animate(obj, target, callback){ 2 clearInterval(obj.timer); 3 obj.timer = setInterval(function(){ 4 //計算步長值 5 //把步長值改成整數,不要出現小數問題 6 var step = (target - obj.offsetLeft) / 10; 7 step = step > 0 ? Math.ceil(step) : Math.floor(step); 8 if(obj.offsetLeft == target){ 9 // 停止動畫本質上是停止定時器 10 clearInterval(obj.timer); 11 // if(callback){ 12 // //調用函數 13 // callback(); 14 // } 這等價於下面的語句 15 callback && callback(); 16 } 17 obj.style.left = obj.offsetLeft + step + 'px'; 18 },10); 19 }
1 window.addEventListener('load',function(){ 2 // 1.獲取按鈕元素 3 var arrow_l = document.querySelector('.arrow-l'); 4 var arrow_r = document.querySelector('.arrow-r'); 5 var focus = document.querySelector('.focus'); 6 // 2.鼠標經過就顯示左右按鈕 7 focus.addEventListener('mouseenter',function(){ 8 arrow_l.style.display = 'block'; 9 arrow_r.style.display = 'block'; 10 clearInterval(timer); 11 timer = null; //清除定時器變量 12 }) 13 // 3.鼠標離開就隱藏左右按鈕 14 focus.addEventListener('mouseleave',function(){ 15 arrow_l.style.display = 'none'; 16 arrow_r.style.display = 'none'; 17 timer = setInterval(function(){ 18 // 手動調用點擊事件 19 arrow_r.click(); 20 },2000); 21 }) 22 23 // 動態生成小圓圈，小圓圈的個數和圖片張數一致，利用循環動態生成小圓圈（ol中的li） 24 var ul = focus.querySelector('ul'); 25 var ol = focus.querySelector('ol'); 26 var focusWidth = focus.offsetWidth; 27 for(var i = 0; i < ul.children.length; i++){ 28 //創建一個li 29 var li = document.createElement('li'); 30 //記錄當前小圓圈的索引號，通過自定義屬性來做 31 li.setAttribute('index',i); 32 //把li插入到ol中 33 ol.appendChild(li); 34 // 4.小圓圈的排他思想，可以直接再生成小圓圈的同時直接綁定點擊事件 35 li.addEventListener('click',function(){ 36 //點擊當前小圓圈就添加current類，其余的小圓圈就移出current類 37 // 干掉所有人 38 for(var i = 0; i < ol.children.length; i++){ 39 ol.children[i].className=''; 40 } 41 //留下我自己 42 this.className = 'current'; 43 // 5.點擊小圓圈，移動圖片，移動的是ul 44 // ul的移動距離是小圓圈的索引號乘以圖片的寬度 注意是負值 45 // 當我們點擊了哪個小li，就拿到當前li的索引號 46 var index = this.getAttribute('index'); 47 // 當我們點擊了某個li,就要把索引號賦值給num和circle,保持同步 48 num = index; 49 circle = index; 50 51 animate(ul, -index*(focusWidth)); 52 }) 53 } 54 //把ol中第一個li設置類名為current 55 ol.children[0].className = 'current'; 56 57 // 6.克隆第一張圖片li放到ul最后面 58 var first = ul.children[0].cloneNode(true); 59 ul.appendChild(first); 60 61 // 7.點擊右側按鈕，圖片滾動一張 62 // 無縫滾動原理 當圖片滾動到克隆的最后一張圖片時，讓ul快速、不做動畫的跳到最左側一張圖片 63 var circle = 0; //circle控制小圓圈的播放 64 var num = 0; 65 // flag節流閥 66 var flag = true; 67 arrow_r.addEventListener('click',function(){ 68 if(flag){ 69 flag = false; 70 // 如果走到最后復制的一張圖片，此時我們ul要快速復原，left為0 71 if (num == ol.children.length){ 72 ul.style.left = 0; 73 num = 0; 74 } 75 num++; 76 animate(ul, -num*focusWidth, function(){ 77 flag = true; //打開節流閥 78 }); 79 80 // 8.點擊右側按鈕，小圓圈跟隨變化 81 circle++; 82 if(circle == ol.children.length){ 83 circle = 0; 84 } 85 // 調用函數 86 clearChange(); 87 } 88 }) 89 90 //9.左側按鈕 91 arrow_l.addEventListener('click',function(){ 92 if(flag){ 93 flag = false; 94 // 如果走到第一張圖片，此時我們ul要快速復原，left為0 95 if (num == 0){ 96 num = ul.children.length - 1; 97 ul.style.left = -num * focusWidth + 'px'; 98 } 99 num--; 100 animate(ul, -num*focusWidth, function(){ 101 flag = true; 102 }); 103 104 //點擊左側按鈕，小圓圈跟隨變化 105 circle--; 106 if(circle < 0){ 107 circle = ol.children.length - 1; 108 } 109 clearChange(); 110 } 111 }) 112 113 function clearChange(){ 114 // 先清除其他小圓圈的類名 115 for(var i = 0; i < ol.children.length; i++){ 116 ol.children[i].className = ''; 117 } 118 // 再添加當前小圓圈的類名 119 ol.children[circle].className = 'current'; 120 } 121 122 // 10.自動播放 定時器, 123 // 自動播放類似於點擊了右側按鈕，使用 手動調用右側按鈕點擊事件 124 var timer = setInterval(function(){ 125 // 手動調用點擊事件 126 arrow_r.click(); 127 },2000); 128 })