zoukankan html css js c++ java

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

查看全文

相关阅读:
vim编辑参数
 hive的元数据存储在mysql后,报错的解决方法！
hadoop添加删除节点
 Android画图Path的使用
 android中path的arcTo方法的使用 .
StrongReference、SoftReference、WeakReference、PhantomReference .
为Android应用增加渠道信息自动化不同渠道的打包过程
 C#知识点
 CSS判断浏览器
 调用外部程序

原文地址：https://www.cnblogs.com/china825829/p/10181100.html

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

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