利用原生js實現輪播圖效果
阿新 • • 發佈：2019-01-08
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js原生輪播圖</title> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; border: 0; } .all { width: 500px; height: 200px; padding: 7px; border: 1px solid #ccc; margin: 100px auto; position: relative; } .screen { width: 500px; height: 200px; /*overflow: hidden;*/ position: relative; } .screen li { width: 500px; height: 200px; overflow: hidden; float: left; } .screen ul { position: absolute; left: 0; top: 0px; width: 3000px; } .all ol { position: absolute; right: 10px; bottom: 10px; line-height: 20px; text-align: center; } .all ol li { float: left; width: 20px; height: 20px; background: #fff; border: 1px solid #ccc; margin-left: 10px; cursor: pointer; } .allol li.current { background: yellow; } #arr { display: none; } #arr span { width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background: #000; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑體'; font-size: 30px; color: #fff; opacity: 0.3; border: 1px solid #fff; } #arr #right { right: 5px; left: auto; } </style> </head> <body> <div class="all" id='box'> <div class="screen"> <ul> <li><img src="images/1.jpg" width="500" height="200"/></li> <li><img src="images/2.jpg" width="500" height="200"/></li> <li><img src="images/3.jpg" width="500" height="200"/></li> <li><img src="images/4.jpg" width="500" height="200"/></li> <li><img src="images/5.jpg" width="500" height="200"/></li> </ul> <ol> </ol> </div> <div id="arr"><span id="left"><</span><span id="right">></span></div> </div> <script src="../animate.js"></script> <script> // 獲取物件 var box = document.querySelector('#box'); var screen = box.children[0]; var arr = document.querySelector('#arr'); var arrLeft = document.querySelector('#left'); var arrRight = document.querySelector('#right'); var ul = screen.children[0]; var ulLis = ul.children; var ol = screen.children[1]; var imgWidth = screen.offsetWidth; // 動態生成小方塊 for (var i = 0; i < ulLis.length; i++) { var li = document.createElement('li'); li.innerHTML = i + 1; ol.appendChild(li); } // 新增假圖片 var cloneLi = ulLis[0].cloneNode(true); ul.appendChild(cloneLi); var olLis = ol.children; olLis[0].className = 'current'; // 滑鼠經過顯示箭頭 box.addEventListener('mouseover', function () { arr.style.display = 'block'; }); // 滑鼠離開隱藏箭頭 box.addEventListener('mouseout', function () { arr.style.display = 'none'; }); // 點選小方塊切換輪播圖 for (var i = 0; i < olLis.length; i++) { olLis[i].index = i; olLis[i].addEventListener('click', function () { // 排它 for (var i = 0; i < olLis.length; i++) { olLis[i].className = ""; } this.className = 'current'; // 讓輪播圖跟隨小方塊 var target = -this.index * imgWidth; animate(ul, target); }); } // 記錄當前圖片 var pic = 0; // 記錄當前小方塊 var square = 0; // 點選左箭頭 arrLeft.addEventListener('click', function () { if (pic === ulLis.length - 1) { pic = 0; ul.style.left = '0px'; } pic++; var target = -pic * imgWidth; animate(ul, target); square--; if (square == -1) { square = olLis.length - 1; } for (var i = 0; i < olLis.length; i++) { olLis[i].className = ""; } olLis[square].className = "current"; }); // 右箭頭點選事件 arrRight.addEventListener('click', function () { if (pic === 0) { pic = ulLis.length - 1; ul.style.left = -pic * imgWidth + 'px'; } pic--; var target = -pic * imgWidth; animate(ul, target); square++; if (square === olLis.length) { square = 0; } for (var i = 0; i < olLis.length; i++) { olLis[i].className = ""; } olLis[square].className = 'current'; }); // 自動播放 timer = setInterval(function () { arrLeft.click(); }, 3000); </script> </body> </html>