番外-輪播圖源碼 · 地表最強JS文檔

## 輪播圖源碼 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> * { margin: 0; padding: 0; text-decoration: none; } body { padding: 20px; } #container { position: relative; width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; margin: 0 auto; } #list { position: absolute; z-index: 1; width: 4200px; height: 400px; } #list img { float: left; width: 600px; height: 400px; } #buttons { position: absolute; left: 250px; bottom: 20px; z-index: 2; height: 10px; width: 100px; } #buttons span { float: left; margin-right: 5px; width: 10px; height: 10px; border: 1px solid #fff; border-radius: 50%; background: #333; cursor: pointer; } #buttons .on { background: orangered; } .arrow { position: absolute; top: 180px; z-index: 2; display: none; width: 40px; height: 40px; font-size: 36px; font-weight: bold; line-height: 39px; text-align: center; color: #fff; background-color: RGBA(0, 0, 0, 0.3); cursor: pointer; } .arrow:hover { background-color: RGBA(0, 0, 0, 0.7); } #container:hover .arrow { display: block; } #prev { left: 20px; } #next { right: 20px; } </style> </head> <body> <div id="container"> <div id="list" style="left: -600px;"> <img src="img/5.jpg" alt="1" /> <img src="img/1.jpg" alt="1" /> <img src="img/2.jpg" alt="2" /> <img src="img/3.jpg" alt="3" /> <img src="img/4.jpg" alt="4" /> <img src="img/5.jpg" alt="5" /> <img src="img/1.jpg" alt="5" /> </div> <div id="buttons"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> </div> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div> </body> <script> window.onload = function() { var list = document.getElementById("list"); var prev = document.getElementById("prev"); var next = document.getElementById("next"); function animate(offset) { //獲取的是style.left，是相對左邊獲取距離，所以第一張圖后style.left都為負值， //且style.left獲取的是字符串，需要用parseInt()取整轉化為數字。 var newLeft = parseInt(list.style.left) + offset; list.style.left = newLeft + "px"; if (newLeft < -3000) { list.style.left = -600 + "px"; } if (newLeft > -600) { list.style.left = -3000 + "px"; } } // prev.onclick = function() { // animate(600); // }; // next.onclick = function() { // animate(-600); // }; var timer; // function play() { // timer = setInterval(function() { // prev.onclick(); // }, 1500); // } function play() { //將輪播圖換成向右切換圖片 timer = setInterval(function() { next.onclick(); }, 2000); } play(); var container = document.getElementById("container"); function stop() { clearInterval(timer); } container.onmouseover = stop; container.onmouseout = play; var buttons = document .getElementById("buttons") .getElementsByTagName("span"); var index = 1; function buttonsShow() { //這里需要清除之前的樣式 for (var i = 0; i < buttons.length; i++) { if (buttons[i].className == "on") { buttons[i].className = ""; } } //數組從0開始，故index需要-1 buttons[index - 1].className = "on"; } prev.onclick = function() { index -= 1; if (index < 1) { index = 5; } buttonsShow(); animate(600); }; next.onclick = function() { //由于上邊定時器的作用，index會一直遞增下去，我們只有5個小圓點，所以需要做出判斷 index += 1; if (index > 5) { index = 1; } buttonsShow(); animate(-600); }; // for (var i = 0; i < buttons.length; i++) { // buttons[i].onclick = function() { // // 在瀏覽器的控制臺打印一下，看看結果 // console.log(i); // /* 偏移量獲取：這里獲得鼠標移動到小圓點的位置，用this把index綁定到對象buttons[i]上 */ // /* 由于這里的index是自定義屬性，需要用到getAttribute()這個DOM2級方法，去獲取自定義index的屬性*/ // var clickIndex = parseInt(this.getAttribute("index")); // var offset = 600 * (index - clickIndex); // animate(offset); //存放鼠標點擊后的位置，用于小圓點的正常顯示 // index = clickIndex; // buttonsShow(); // }; // } for (var i = 0; i < buttons.length; i++) { // 這里使用的是立即執行函數， (function(i) { buttons[i].onclick = function() { var clickIndex = parseInt(this.getAttribute("index")); var offset = 600 * (index - clickIndex); animate(offset); index = clickIndex; buttonsShow(); }; })(i); } }; </script> </html> ```