页面中经常会用到各式各样的轮播图，今天贺贺为大家介绍一种常用的方法，对于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 名称，从而达到轮播图的效果；