用 JS 写 （轮播图 / 选项卡 / 滑动门）

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

posted @ 2018-12-26 19:07  机智的举哥  阅读(903)  评论(0)  编辑  收藏  举报