用 JS 写 (轮播图 / 选项卡 / 滑动门)

2018-12-27 07:42:18来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Cesium Vue开发环境搭建

下一篇:js 中实现getter和setter函数方法,及运算符的特殊用法