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

时间：2024-12-06 18:36:08

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

相关文章