功能描述：
1.滑鼠經過 左右側箭頭顯示，滑鼠離開 箭頭隱藏
2.動態添加底部小圓圈并系結單擊事件，并且讓小圓圈的點擊事件和左右箭頭點擊事件同步
3.拷貝第一張圖片添加到ul最后可以實作動態添加圖片
4.給箭頭系結單擊事件，并且使圖片可以無縫輪播
5.實作自動輪播（影片函式）
具體實作代碼：
1.滑鼠移入左右側箭頭顯示，滑鼠離開箭頭隱藏
1 con.addEventListener('mouseenter', function() { 2 arrow_l.style.display = 'block'; // 將左右箭頭的display設為block 3 arrow_r.style.display = 'block'; 4 }); 5 con.addEventListener('mouseleave', function() { 6 arrow_l.style.display = 'none'; // 將左右箭頭display設為none 7 arrow_r.style.display = 'none'; 8 });
2.動態添加底部小圓圈并系結單擊事件，并且讓小圓圈的點擊事件和左右箭頭點擊事件同步
1 for(var i = 0; i < ul.children.length; i++) { 2 var li = document.createElement('li'); 3 li.setAttribute('index', i); // 通過添加自定義屬性來記錄小圓圈索引號 4 ol.appendChild(li); // 將創建的li添加進ol里 5 // 生成小圓圈的同時就可以給它系結單擊事件 6 li.addEventListener('click', function() { 7 // 排他思想 干掉所有人，留下我自己 8 for(var i = 0; i < ol.children.length; i++) { // 先把所有的小圓圈改為未選中狀態 9 ol.children[i].className = ''; 10 } 11 // 再把當前小圓圈改為選中狀態 12 this.className = 'current'; 13 var index = this.getAttribute('index'); // 獲取當前小圓圈的索引 14 // 將index值賦值給num以及circle，將小圓圈的點擊事件和左右箭頭點擊事件同步 15 num = index; 16 circle = index; 17 animate(ul, - index * conWidth); 18 }) 19 }
3.拷貝第一張圖片添加到ul最后可以實作動態添加圖片
1 // 克隆第一張圖片 2 var first = ul.children[0].cloneNode(true); // true 深拷貝 3 ul.appendChild(first); // 拷貝第一張圖片添加到ul最后
4.給箭頭系結單擊事件，并且使圖片可以無縫輪播
①右側箭頭的單擊事件
1 var num = 0; // 用來存盤點擊后圖片序號 2 var circle = 0; // 用來存盤點擊后小圓圈序號 3 var flag = true; // flag 節流閥 防止用戶點擊過快 圖片播放太快 4 // 右側箭頭點擊播放 5 arrow_r.addEventListener('click', function() { 6 if(flag) { 7 // 點擊后先關閉節流閥 8 flag = false; 9 // 如果播放到了最后一張，就把left直接值設為0從頭播放，同時還原num 10 if(num == ul.children.length - 1) { 11 ul.style.left = 0; 12 num = 0; 13 } 14 num++; 15 animate(ul, - num * conWidth, function() { 16 // 回呼函式 影片執行完后開啟節流閥 17 flag = true; 18 }); 19 // 小圓圈和箭頭一起變化 20 circle++; 21 /* if(circle == ol.children.length) { 22 circle = 0; 23 } */ 24 // 可以用三元運算子判斷小圓圈是否到了最后一個，如果是最后一個就還原circle 25 circle == ol.children.length ? circle = 0 : circle; 26 circleChange(); // 使當前小圓圈為選中狀態（重復代碼封裝到一個函式里了） 27 } 28 })
②左側箭頭的單擊事件
1 arrow_l.addEventListener('click', function() { 2 if(flag) { 3 // 首先關閉節流閥 4 flag = false; 5 // 如果播放到了第一張，就把left值設為最后一張的值 6 if(num == 0) { 7 num = ul.children.length - 1; 8 ul.style.left = - num * conWidth + 'px'; 9 } 10 num--; 11 animate(ul, - num * conWidth, function() { 12 flag = true; 13 }); 14 // 小圓圈和箭頭一起變化 15 circle--; 16 // 三元運算式 circle < 0 時說明是第一張圖片，將小圓圈改為第四個（索引為3） 17 circle < 0 ? circle = ol.children.length - 1 : circle; 18 circleChange(); 19 } 20 })circleChange();函式代碼
1 // 小圓圈的選中狀態（相同代碼可以封裝為一個函式，使代碼更簡潔） 2 function circleChange() { 3 // 排他思想 4 for(var i = 0; i < ol.children.length; i++) { 5 ol.children[i].className = ''; 6 } 7 ol.children[circle].className = 'current'; 8 }
5.實作自動輪播（影片函式）
1 // 自動播放輪播圖，相當于隔一段時間呼叫一次右側箭頭點擊事件 2 var timer = setInterval(function() { 3 // 手動呼叫點擊事件 4 arrow_r.click(); 5 }, 2000);
影片函式 animate.js（ps：我沒有把這個寫入下邊index.js里，這個要你自己弄進去哦，可以作為animate.js檔案引入進去或者直接粘貼到你的js代碼里邊）
1 // obj 影片物件 2 // target 目標位置 3 // callback 回呼函式 4 function animate(obj, target, callback) { 5 clearInterval(obj.timer); 6 obj.timer = setInterval(function() { 7 var step = (target - obj.offsetLeft) / 10; // step步長值 8 step = step > 0 ? Math.ceil(step) : Math.floor(step); // 大于零向上取整,小于零向下取整 9 if(obj.offsetLeft == target) { 10 clearInterval(obj.timer); 11 // if(callback) { // 判斷是否傳了回呼函式 12 // callback(); // 回呼函式，當影片執行完后才執行 13 // } 14 // &&是短路運算子，存在callback時才會繼續執行callback() 15 callback && callback(); 16 } 17 obj.style.left = obj.offsetLeft + step + 'px'; 18 }, 15) 19 }
具體實作代碼如下：
HTML代碼：
1 <div class="con"> 2 <i class="icon iconfont iconarrow_left arrow-l"></i> 3 <i class="icon iconfont iconarrow_right arrow-r"></i> 4 <ul> 5 <li> 6 <a href="javascript:;"><img src="images/img1.jpg" alt=""></a> 7 </li> 8 <li> 9 <a href="javascript:;"><img src="images/img2.jpg" alt=""></a> 10 </li> 11 <li> 12 <a href="javascript:;"><img src="images/img3.jpg" alt=""></a> 13 </li> 14 <li> 15 <a href="javascript:;"><img src="images/img4.jpg" alt=""></a> 16 </li> 17 <li> 18 <a href="javascript:;"><img src="images/img5.jpg" alt=""></a> 19 </li> 20 </ul> 21 <ol> 22 </ol> 23 </div>
ps: 我左右側小箭頭是使用的Iconfont圖示（iconarrow_left，iconarrow_right），要引入進去
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1518420_oljcm07nn2.css">
CSS代碼：
1 <style> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 ul,li,ol,a { 7 list-style: none; 8 text-decoration: none; 9 } 10 .con { 11 width: 533px; 12 height: 300px; 13 margin: 100px auto; 14 position: relative; 15 background-color: #f0f0f0; 16 overflow: hidden; 17 } 18 .arrow-l,.arrow-r{ 19 display: none; 20 width: 20px; 21 height: 40px; 22 line-height: 40px; 23 text-align: center; 24 color: #eee; 25 position: absolute; 26 top: 45%; 27 background-color: rgba(0, 0, 0, 0.2); 28 z-index: 2; 29 cursor: pointer; 30 } 31 .arrow-l { 32 left: 0; 33 } 34 .arrow-r{ 35 right: 0; 36 } 37 ul { 38 position: absolute; 39 width: 600%; 40 } 41 ul li { 42 float: left; 43 } 44 ul li img { 45 width: 533px; 46 height: 300px; 47 } 48 ol { 49 position: absolute; 50 left: 50%; 51 bottom: 8px; 52 -webkit-transform: translateX(-50%); 53 transform: translateX(-50%); 54 } 55 ol li { 56 float: left; 57 width: 6px; 58 height: 6px; 59 margin: 0 2px; 60 border-radius: 50%; 61 border: 2px solid rgba(255, 255, 255, 0.5); 62 cursor: pointer; 63 } 64 .current { 65 background-color: #ffe; 66 } 67 </style>
詳細JavaScript代碼（index.js）
1 window.addEventListener('load', function() { // 等頁面加載完畢 2 // 獲取需要用到的的元素 3 var arrow_l = document.querySelector('.arrow-l'); 4 var arrow_r = document.querySelector('.arrow-r'); 5 var con = document.querySelector('.con'); 6 var conWidth = con.offsetWidth; 7 // 滑鼠經過箭頭顯示，滑鼠離開箭頭隱藏 8 con.addEventListener('mouseenter', function() { 9 arrow_l.style.display = 'block'; // 將左右箭頭的display設為block 10 arrow_r.style.display = 'block'; 11 // 滑鼠經過停止定時器 12 clearInterval(timer); 13 timer = null; // 釋放定時器變數 14 }); 15 con.addEventListener('mouseleave', function() { 16 arrow_l.style.display = 'none'; // 將左右箭頭display設為none 17 arrow_r.style.display = 'none'; 18 // 滑鼠離開再重新開啟定時器 19 timer = setInterval(function() { 20 // 手動呼叫點擊事件 21 arrow_r.click(); // 自動輪播 22 }, 2000); 23 }); 24 25 var ul = con.querySelector('ul'); 26 var ol = con.querySelector('ol'); 27 // 動態添加底部小圓圈 28 for(var i = 0; i < ul.children.length; i++) { 29 var li = document.createElement('li'); 30 // 通過添加自定義屬性來記錄小圓圈索引號 31 li.setAttribute('index', i); 32 ol.appendChild(li); 33 // 生成小圓圈的同時就可以給它系結單擊事件 34 li.addEventListener('click', function() { 35 // 排他思想 干掉所有人，留下我自己 36 for(var i = 0; i < ol.children.length; i++) { // 先把所有的小圓圈改為未選中狀態 37 ol.children[i].className = ''; 38 } 39 // 再把當前小圓圈改為選中狀態 40 this.className = 'current'; 41 var index = this.getAttribute('index'); // 獲取當前小圓圈的索引 42 // 將index值賦值給num以及circle，將小圓圈的點擊事件和左右箭頭點擊事件同步 43 num = index; 44 circle = index; 45 animate(ul, - index * conWidth); 46 }) 47 } 48 // 讓第一個小圓圈底色為白色（選中狀態） 49 ol.children[0].className = 'current'; 50 // 克隆第一張圖片 51 var first = ul.children[0].cloneNode(true); // true 深拷貝 52 ul.appendChild(first); // 拷貝第一張圖片添加到ul最后 53 54 var num = 0; // 用來存盤點擊后圖片序號 55 var circle = 0; // 用來存盤點擊后小圓圈序號 56 var flag = true; // flag 節流閥 防止用戶點擊過快 圖片播放太快 57 // 右側箭頭點擊播放 58 arrow_r.addEventListener('click', function() { 59 if(flag) { 60 // 點擊后先關閉節流閥 61 flag = false; 62 // 如果播放到了最后一張，就把left直接值設為0從頭播放，同時還原num 63 if(num == ul.children.length - 1) { 64 ul.style.left = 0; 65 num = 0; 66 } 67 num++; 68 animate(ul, - num * conWidth, function() { 69 // 回呼函式 影片執行完后開啟節流閥 70 flag = true; 71 }); 72 // 小圓圈和箭頭一起變化 73 circle++; 74 /* if(circle == ol.children.length) { 75 circle = 0; 76 } */ 77 // 可以用三元運算子判斷小圓圈是否到了最后一個，如果是最后一個就還原circle 78 circle == ol.children.length ? circle = 0 : circle; 79 circleChange(); // 使當前小圓圈為選中狀態 80 } 81 }) 82 83 // 左側箭頭點擊播放 84 arrow_l.addEventListener('click', function() { 85 if(flag) { 86 // 關閉節流閥 87 flag = false; 88 // 如果播放到了第一張，就把left值設為最后一張的值 89 if(num == 0) { 90 num = ul.children.length - 1; 91 ul.style.left = - num * conWidth + 'px'; 92 } 93 num--; 94 animate(ul, - num * conWidth, function() { 95 flag = true; 96 }); 97 // 小圓圈和箭頭一起變化 98 circle--; 99 // circle < 0 時說明是第一張圖片，將小圓圈改為第四個（索引為3） 100 if(circle < 0) { 101 circle = ol.children.length - 1; 102 } 103 circleChange(); 104 } 105 }) 106 // 小圓圈的選中狀態（相同代碼可以封裝為一個函式，使代碼更簡潔） 107 function circleChange() { 108 // 排他思想 109 for(var i = 0; i < ol.children.length; i++) { 110 ol.children[i].className = ''; 111 } 112 ol.children[circle].className = 'current'; 113 } 114 // 自動播放輪播圖，相當于隔一段時間呼叫一次右側箭頭點擊事件 115 var timer = setInterval(function() { 116 // 手動呼叫點擊事件 117 arrow_r.click(); 118 }, 2000); 119 })
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/167840.html
標籤：JavaScript
上一篇：獲取json物件的鍵陣列和值陣列
下一篇：ES6-字串