頁面中經常會用到各式各樣的輪播圖，今天賀賀為大家介紹一種常用的方法，對於JS我們需要舉一反三，一種方法可以對多個輪播樣式進行渲染。 此種方法通過 JS 來改變 HTML 中標簽的 Class 名稱，從而達到輪播圖的效果； ...
頁面中經常會用到各式各樣的輪播圖，今天賀賀為大家介紹一種常用的方法，對於JS我們需要舉一反三，一種方法可以對多個輪播樣式進行渲染。
<head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 590px; height: 470px; margin: 100px auto; border: 1px solid #ececec; position: relative; } #box p { height: 14px; margin: 0; position: absolute; bottom: 50px; left: 50px; } #box p i { display: block; float: left; margin-left: 10px; width: 10px; height: 10px; border-radius: 7px; border: 2px solid #999; } #box img { /*display: block;*/ width: 590px; height: 470px; display: none; } #box p i.on { background: #fff; box-shadow: 0 0 3px #fff; } #box img.show { display: block; } </style> <script> window.onload = function () { var oBox = document.getElementById('box'); var aI = oBox.getElementsByTagName('i'); var aImg = oBox.getElementsByTagName('img'); for (var i = 0; i < aI.length; i++){ aI[i].index = i; aI[i].onmouseover = function () { for (var i = 0; i < aI.length; i++){ aI[i].className = ''; aImg[i].className = ''; } this.className = 'on'; aImg[this.index].className = 'show'; } } } </script> </head> <body> <div id="box"> <p> <i class="on"></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </p> <img src="../images/1.jpg" alt="" class="show"> <img src="../images/2.jpg" alt=""> <img src="../images/3.jpg" alt=""> <img src="../images/4.jpg" alt=""> <img src="../images/5.jpg" alt=""> <img src="../images/6.jpg" alt=""> <img src="../images/7.jpg" alt=""> </div> </body>
此種方法通過 JS 來改變 HTML 中標簽的 Class 名稱，從而達到輪播圖的效果；
