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

用 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 名称，从而达到轮播图的效果；