原生javascript 簡單輪播圖
阿新 • • 發佈：2019-04-25
ive clear isp mar eight 簡單 lin 停止 line
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>輪播圖復習</title> <style> .container { position: relative; width: 500px; height: 300px; margin: 100px auto; overflow: hidden; } .img_box { position: absolute; overflow: hidden; width: 2000px; } .container img { float: left; width: 500px; height: 300px; } a { position: absolute; top: 50%; transform: translateY(-50%); display: block; width: 24px; height: 40px; text-align: center; text-decoration: none; color: white; font-size: 20px; line-height: 40px; } .container a:hover { background-color: rgba(0, 0, 0, .5); } .left { left: 0; } .right { right: 0; } .dot_box { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 104px; height: 20px; } .dot_box span { display: inline-block; float: left; width: 20px; height: 20px; border-radius: 50%; margin: 0 3px; text-align: center; line-height: 20px; color: deepskyblue; cursor: pointer; } .dot_box span:hover { background-color: rgba(0, 0, 0, .5); } .dot_box .on { color: white; background-color: #ee3333 !important; } </style> </head> <body> <div class="container"> <div class="img_box" style="left: 0;"> <img src="images/p1.gif" alt=""> <img src="images/p2.gif" alt=""> <img src="images/p3.gif" alt=""> <img src="images/p4.gif" alt=""> </div> <a href="#" class="left"> < </a> <a href="#" class="right"> > </a> <div class="dot_box"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> </div> <script> var imgBox = document.querySelector(".img_box"); var index = 0; // 向左移動函數模塊 function goLeft() { if (parseInt(imgBox.style.left) < -1000) { imgBox.style.left = "0"; } else { var newLeft = parseInt(imgBox.style.left); imgBox.style.left = newLeft - 500 + ‘px‘; } // 嵌入 index變量 index是小圓點的索引 控制小圓點的樣式 index++; if (index > 3) { index = 0; } toOn(); } // 向右移動函數模塊 function goRight() { if (parseInt(imgBox.style.left) >= 0) { imgBox.style.left = "-1500px"; } else { var newRight = parseInt(imgBox.style.left); imgBox.style.left = newRight + 500 + ‘px‘; } // 嵌入 index變量 index是小圓點的索引 控制小圓點的樣式 index--; if (index < 0) { index = 3; } toOn(); } // 左箭頭 點擊調用函數 var left = document.querySelector(".left"); left.addEventListener("click", goLeft); // 右箭頭 點擊調用函數 var right = document.querySelector(".right"); right.addEventListener("click", goRight); // 小圓點 樣式控制模塊 var dot = document.getElementsByTagName("span"); function toOn() { for (var i = 0; i < dot.length; i++) { dot[i].className = ""; } dot[index].className = "on"; } toOn(); // 自動輪播控制模塊 var timer = null; function autoPlay() { timer = setInterval(goLeft, 1000); } autoPlay(); var container = document.querySelector(".container"); // 鼠標進入container 區域 自動停止輪播 container.onmouseenter = function () { clearInterval(timer); }; // 鼠標離開container區域 自動開始輪播 container.onmouseleave = function () { autoPlay(); }; // 小圓點 點擊控制模塊 for (var i = 0; i < dot.length; i++) { (function (i) { dot[i].onclick = function () { var dis = index - i; imgBox.style.left = parseInt(imgBox.style.left) + dis * 500 + ‘px‘; index = i; toOn(); } })(i) } </script> </body> </html>
原生javascript 簡單輪播圖