用 JS 写 (轮播图 / 选项卡 / 滑动门)
程序员文章站
2024-01-15 17:22:10
页面中经常会用到各式各样的轮播图,今天贺贺为大家介绍一种常用的方法,对于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 名称,从而达到轮播图的效果;
上一篇: 在Android源码中添加一个收集开机信息的本地服务
下一篇: 99%的程序都没有考虑的网络异常