站長資訊網(wǎng)本篇文章給大家?guī)淼膬?nèi)容是JavaScript如何實現(xiàn)動態(tài)輪播圖效果？（代碼示例）。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。
功能描述：
1.鼠標經(jīng)過 左右側(cè)箭頭顯示，鼠標離開 箭頭隱藏
2.動態(tài)添加底部小圓圈并綁定單擊事件，并且讓小圓圈的點擊事件和左右箭頭點擊事件同步
3.拷貝第一張圖片添加到ul最后可以實現(xiàn)動態(tài)添加圖片
4.給箭頭綁定單擊事件，并且使圖片可以無縫輪播
5.實現(xiàn)自動輪播（動畫函數(shù)）
具體實現(xiàn)代碼：
1.鼠標移入左右側(cè)箭頭顯示，鼠標離開箭頭隱藏
con.addEventListener('mouseenter', function() { arrow_l.style.display = 'block'; // 將左右箭頭的display設(shè)為block arrow_r.style.display = 'block'; }); con.addEventListener('mouseleave', function() { arrow_l.style.display = 'none'; // 將左右箭頭display設(shè)為none arrow_r.style.display = 'none'; });
2.動態(tài)添加底部小圓圈并綁定單擊事件，并且讓小圓圈的點擊事件和左右箭頭點擊事件同步
for(var i = 0; i < ul.children.length; i++) { var li = document.createElement('li'); li.setAttribute('index', i); // 通過添加自定義屬性來記錄小圓圈索引號 ol.appendChild(li); // 將創(chuàng)建的li添加進ol里 // 生成小圓圈的同時就可以給它綁定單擊事件 li.addEventListener('click', function() { // 排他思想 干掉所有人，留下我自己 for(var i = 0; i < ol.children.length; i++) { // 先把所有的小圓圈改為未選中狀態(tài) ol.children[i].className = ''; } // 再把當前小圓圈改為選中狀態(tài) this.className = 'current'; var index = this.getAttribute('index'); // 獲取當前小圓圈的索引 // 將index值賦值給num以及circle，將小圓圈的點擊事件和左右箭頭點擊事件同步 num = index; circle = index; animate(ul, - index * conWidth); }) }
3.拷貝第一張圖片添加到ul最后可以實現(xiàn)動態(tài)添加圖片
// 克隆第一張圖片 var first = ul.children[0].cloneNode(true); // true 深拷貝 ul.appendChild(first); // 拷貝第一張圖片添加到ul最后
4.給箭頭綁定單擊事件，并且使圖片可以無縫輪播
①右側(cè)箭頭的單擊事件
var num = 0; // 用來存儲點擊后圖片序號 var circle = 0; // 用來存儲點擊后小圓圈序號 var flag = true; // flag 節(jié)流閥 防止用戶點擊過快 圖片播放太快 // 右側(cè)箭頭點擊播放 arrow_r.addEventListener('click', function() { if(flag) { // 點擊后先關(guān)閉節(jié)流閥 flag = false; // 如果播放到了最后一張，就把left直接值設(shè)為0從頭播放，同時還原num if(num == ul.children.length - 1) { ul.style.left = 0; num = 0; } num++; animate(ul, - num * conWidth, function() { // 回調(diào)函數(shù) 動畫執(zhí)行完后開啟節(jié)流閥 flag = true; }); // 小圓圈和箭頭一起變化 circle++; /* if(circle == ol.children.length) { circle = 0; } */ // 可以用三元運算符判斷小圓圈是否到了最后一個，如果是最后一個就還原circle circle == ol.children.length ? circle = 0 : circle; circleChange(); // 使當前小圓圈為選中狀態(tài)（重復(fù)代碼封裝到一個函數(shù)里了） } })
②左側(cè)箭頭的單擊事件
arrow_l.addEventListener('click', function() { if(flag) { // 首先關(guān)閉節(jié)流閥 flag = false; // 如果播放到了第一張，就把left值設(shè)為最后一張的值 if(num == 0) { num = ul.children.length - 1; ul.style.left = - num * conWidth + 'px'; } num--; animate(ul, - num * conWidth, function() { flag = true; }); // 小圓圈和箭頭一起變化 circle--; // 三元表達式 circle < 0 時說明是第一張圖片，將小圓圈改為第四個（索引為3） circle < 0 ? circle = ol.children.length - 1 : circle; circleChange(); } })
circleChange();函數(shù)代碼
// 小圓圈的選中狀態(tài)（相同代碼可以封裝為一個函數(shù)，使代碼更簡潔） function circleChange() { // 排他思想 for(var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } ol.children[circle].className = 'current'; }
5.實現(xiàn)自動輪播（動畫函數(shù)）
// 自動播放輪播圖，相當于隔一段時間調(diào)用一次右側(cè)箭頭點擊事件 var timer = setInterval(function() { // 手動調(diào)用點擊事件 arrow_r.click(); }, 2000);
動畫函數(shù) animate.js（ps：我沒有把這個寫入下邊index.js里，這個要你自己弄進去哦，可以作為animate.js文件引入進去或者直接粘貼到你的js代碼里邊）
// obj 動畫對象 // target 目標位置 // callback 回調(diào)函數(shù) function animate(obj, target, callback) { clearInterval(obj.timer); obj.timer = setInterval(function() { var step = (target - obj.offsetLeft) / 10; // step步長值 step = step > 0 ? Math.ceil(step) : Math.floor(step); // 大于零向上取整,小于零向下取整 if(obj.offsetLeft == target) { clearInterval(obj.timer); // if(callback) { // 判斷是否傳了回調(diào)函數(shù) // callback(); // 回調(diào)函數(shù)，當動畫執(zhí)行完后才執(zhí)行 // } // &&是短路運算符，存在callback時才會繼續(xù)執(zhí)行callback() callback && callback(); } obj.style.left = obj.offsetLeft + step + 'px'; }, 15) }
具體實現(xiàn)代碼如下：
HTML代碼：
<div class="con"> <i class="icon iconfont iconarrow_left arrow-l"></i> <i class="icon iconfont iconarrow_right arrow-r"></i> <ul> <li> <a href="javascript:;"><img src="images/img1.jpg" alt=""></a> </li> <li> <a href="javascript:;"><img src="images/img2.jpg" alt=""></a> </li> <li> <a href="javascript:;"><img src="images/img3.jpg" alt=""></a> </li> <li> <a href="javascript:;"><img src="images/img4.jpg" alt=""></a> </li> <li> <a href="javascript:;"><img src="images/img5.jpg" alt=""></a> </li> </ul> <ol> </ol> </div>
ps: 我左右側(cè)小箭頭是使用的Iconfont圖標（iconarrow_left，iconarrow_right），要引入進去
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1518420_oljcm07nn2.css">
CSS代碼：
<style> * { margin: 0; padding: 0; } ul,li,ol,a { list-style: none; text-decoration: none; } .con { width: 533px; height: 300px; margin: 100px auto; position: relative; background-color: #f0f0f0; overflow: hidden; } .arrow-l,.arrow-r{ display: none; width: 20px; height: 40px; line-height: 40px; text-align: center; color: #eee; position: absolute; top: 45%; background-color: rgba(0, 0, 0, 0.2); z-index: 2; cursor: pointer; } .arrow-l { left: 0; } .arrow-r{ right: 0; } ul { position: absolute; width: 600%; } ul li { float: left; } ul li img { width: 533px; height: 300px; } ol { position: absolute; left: 50%; bottom: 8px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } ol li { float: left; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); cursor: pointer; } .current { background-color: #ffe; } </style>
詳細JavaScript代碼（index.js）
window.addEventListener('load', function() { // 等頁面加載完畢 // 獲取需要用到的的元素 var arrow_l = document.querySelector('.arrow-l'); var arrow_r = document.querySelector('.arrow-r'); var con = document.querySelector('.con'); var conWidth = con.offsetWidth; // 鼠標經(jīng)過箭頭顯示，鼠標離開箭頭隱藏 con.addEventListener('mouseenter', function() { arrow_l.style.display = 'block'; // 將左右箭頭的display設(shè)為block arrow_r.style.display = 'block'; // 鼠標經(jīng)過停止定時器 clearInterval(timer); timer = null; // 釋放定時器變量 }); con.addEventListener('mouseleave', function() { arrow_l.style.display = 'none'; // 將左右箭頭display設(shè)為none arrow_r.style.display = 'none'; // 鼠標離開再重新開啟定時器 timer = setInterval(function() { // 手動調(diào)用點擊事件 arrow_r.click(); // 自動輪播 }, 2000); }); var ul = con.querySelector('ul'); var ol = con.querySelector('ol'); // 動態(tài)添加底部小圓圈 for(var i = 0; i < ul.children.length; i++) { var li = document.createElement('li'); // 通過添加自定義屬性來記錄小圓圈索引號 li.setAttribute('index', i); ol.appendChild(li); // 生成小圓圈的同時就可以給它綁定單擊事件 li.addEventListener('click', function() { // 排他思想 干掉所有人，留下我自己 for(var i = 0; i < ol.children.length; i++) { // 先把所有的小圓圈改為未選中狀態(tài) ol.children[i].className = ''; } // 再把當前小圓圈改為選中狀態(tài) this.className = 'current'; var index = this.getAttribute('index'); // 獲取當前小圓圈的索引 // 將index值賦值給num以及circle，將小圓圈的點擊事件和左右箭頭點擊事件同步 num = index; circle = index; animate(ul, - index * conWidth); }) } // 讓第一個小圓圈底色為白色（選中狀態(tài)） ol.children[0].className = 'current'; // 克隆第一張圖片 var first = ul.children[0].cloneNode(true); // true 深拷貝 ul.appendChild(first); // 拷貝第一張圖片添加到ul最后 var num = 0; // 用來存儲點擊后圖片序號 var circle = 0; // 用來存儲點擊后小圓圈序號 var flag = true; // flag 節(jié)流閥 防止用戶點擊過快 圖片播放太快 // 右側(cè)箭頭點擊播放 arrow_r.addEventListener('click', function() { if(flag) { // 點擊后先關(guān)閉節(jié)流閥 flag = false; // 如果播放到了最后一張，就把left直接值設(shè)為0從頭播放，同時還原num if(num == ul.children.length - 1) { ul.style.left = 0; num = 0; } num++; animate(ul, - num * conWidth, function() { // 回調(diào)函數(shù) 動畫執(zhí)行完后開啟節(jié)流閥 flag = true; }); // 小圓圈和箭頭一起變化 circle++; /* if(circle == ol.children.length) { circle = 0; } */ // 可以用三元運算符判斷小圓圈是否到了最后一個，如果是最后一個就還原circle circle == ol.children.length ? circle = 0 : circle; circleChange(); // 使當前小圓圈為選中狀態(tài) } }) // 左側(cè)箭頭點擊播放 arrow_l.addEventListener('click', function() { if(flag) { // 關(guān)閉節(jié)流閥 flag = false; // 如果播放到了第一張，就把left值設(shè)為最后一張的值 if(num == 0) { num = ul.children.length - 1; ul.style.left = - num * conWidth + 'px'; } num--; animate(ul, - num * conWidth, function() { flag = true; }); // 小圓圈和箭頭一起變化 circle--; // circle < 0 時說明是第一張圖片，將小圓圈改為第四個（索引為3） if(circle < 0) { circle = ol.children.length - 1; } circleChange(); } }) // 小圓圈的選中狀態(tài)（相同代碼可以封裝為一個函數(shù)，使代碼更簡潔） function circleChange() { // 排他思想 for(var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } ol.children[circle].className = 'current'; } // 自動播放輪播圖，相當于隔一段時間調(diào)用一次右側(cè)箭頭點擊事件 var timer = setInterval(function() { // 手動調(diào)用點擊事件 arrow_r.click(); }, 2000); })
