原生js實現輪播圖特效
阿新 • • 發佈:2020-05-06
輪播圖也稱為焦點圖,是網頁中比較常見的網頁特效。
功能需求:
1.滑鼠經過輪播圖模組,左右按鈕顯示,離開隱藏左右按鈕。
2.點選右側按鈕一次,圖片往左播放一張,以此類推,左側按鈕同理。
3.圖片播放的同時,下面小圓圈模組跟隨一起變化。
4.點選小圓圈,可以播放相應圖片。
5.滑鼠不經過輪播圖,輪播圖也會自動播放圖片。
6.滑鼠經過,輪播圖模組, 自動播放停止。
此文章的程式碼為一個完整的輪播圖的實現程式碼,複製即可執行
實現效果由於大小問題無法上傳,可自行觀看淘寶或京東首頁輪播圖效果
html檔案:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/index.css" rel="external nofollow" > <script src="js/animate.js"></script> <script src="js/index.js"></script> </head> <body> <div class="box"> <ul> <li><img src="img/focus.jpg" alt="原生js實現輪播圖特效"></li> <li><img src="img/focus1.jpg" alt="原生js實現輪播圖特效"></li> <li><img src="img/focus2.jpg" alt="原生js實現輪播圖特效"></li> <li><img src="img/focus3.jpg" alt="原生js實現輪播圖特效"></li> </ul> <ol> </ol> <div class="arr-l"> < </div> <div class="arr-r"> > </div> </div> </body> </html>
css檔案:
* { margin: 0; padding: 0; outline: none; } .box { overflow: hidden; position: relative; height: 455px; width: 721px; background-color: pink; margin: 50px auto; } .box ul { position: absolute; top: 0; left: 0; width: 600%; } .box ul li { list-style: none; float: left; } .box ol { position: absolute; bottom: 10px; left: 100px; background-color: rgba(255,255,.3); border-radius: 8px; list-style: none; height: 10px; padding: 2px 5px; } .box ol li { cursor: pointer; float: left; height: 8px; width: 8px; border: 1px solid #fff; border-radius: 50%; margin: 0 5px; } .arr-l,.arr-r { display: none; color: #fff; cursor: pointer; position: absolute; height: 40px; width: 30px; background-color: rgba(0,.3); line-height: 40px; text-align: center; } .arr-l { top: 50%; left: 0; transform: translateY(-50%); } .arr-r { right: 0; top: 50%; transform: translateY(-50%); } .current { background-color: #fff; }
動畫實現js檔案animate.js:
function animate(obj,target,callback) { clearInterval(obj.timer); obj.timer = setInterval(function () { if (target - obj.offsetLeft > 0) { var step = Math.ceil((target - obj.offsetLeft) / 10); } else { var step = Math.floor((target - obj.offsetLeft) / 10); } if (obj.offsetLeft == target) { clearInterval(obj.timer); callback && callback(); } obj.style.left = obj.offsetLeft + step + 'px'; },15) }
index.js:
window.addEventListener('load',function () { var arrl = this.document.querySelector('.arr-l'); var arrr = this.document.querySelector('.arr-r'); var box = this.document.querySelector('.box'); var boxWidth = box.offsetWidth; box.addEventListener('mouseenter',function () { arrl.style.display = 'block'; arrr.style.display = 'block'; clearInterval(timer); timer = null; }) box.addEventListener('mouseleave',function () { arrl.style.display = 'none'; arrr.style.display = 'none'; timer = setInterval(function () { arrr.click(); },2000); }); var ul = box.querySelector('ul'); var ol = box.querySelector('ol'); for (var i = 0; i < ul.children.length; i++) { var li = document.createElement('li'); li.setAttribute('data-index',i); ol.appendChild(li); ol.children[0].className = 'current'; li.addEventListener('click',function () { for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } this.className = 'current'; var dateindex = this.getAttribute('data-index'); num = dateindex; circle = dateindex; animate(ul,-dateindex * boxWidth); }); } var first = ul.children[0].cloneNode(true); ul.appendChild(first); var num = 0; var circle = 0; var flag = true; arrr.addEventListener('click',function () { if (flag) { flag = false; if (num == ul.children.length - 1) { ul.style.left = 0; num = 0; } num++; animate(ul,-num * boxWidth,function () { flag = true; }); circle++; if (circle == ol.children.length) { circle = 0; } circleChange(); } }); arrl.addEventListener('click',function () { if (flag) { flag = false; if (num == 0) { num = ul.children.length - 1; ul.style.left = -num * boxWidth + 'px'; } num--; animate(ul,function () { flag = true; }); circle--; if (circle < 0) { circle = ol.children.length - 1; } circleChange(); } }); function circleChange() { for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } ol.children[circle].className = 'current'; } var timer = setInterval(function () { arrr.click(); },2000); })
注意事項
引用兩個js檔案時,animate.js要在index.js之前引用,因為index.js中要用到animate.js裡的函式。
精彩專題分享:jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。