原生js实现小米中的轮播图

最新推荐文章于 2023-08-03 11:27:17 发布
chili_fan
最新推荐文章于 2023-08-03 11:27:17 发布
阅读量319
点赞数
文章标签： javascript
本文链接：https://blog.csdn.net/chili_fan/article/details/106923616
版权
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        li {
            list-style: none;
        }

        .box {
            position: relative;
            width: 1000px;
            height: 460px;
            border: 1px solid pink;
        }

        .ul1 {
            width: 100%;
            height: 100%;
        }

        .ul1>li {
            position: absolute;
            top: 0;
            left: 0;
        }

        .ul1>li:first-child {
            z-index: 100;
        }

        .indexs {
            z-index: 1000;
        }

        .left-button,
        .right-button {
            position: absolute;
            top: 50%;
            margin-top: -35px;
            width: 35px;
            height: 70px;
            background: rgba(0, 0, 0, .3);
            color: #ccc;
            border-radius: 0 5px 5px 0;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            font-family: serif;
        }

        .right-button {
            right: 0;
            border-radius: 5px 0 0 5px;
        }

        .left-button:hover,
        .right-button:hover {
            background-color: #00000050;
            color: #fff;
        }

        .ul2 {
            position: absolute;
            bottom: 20px;
            right: 100px;
        }

        .ul2 li {
            float: left;
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 100%;
            line-height: 20px;
            text-align: center;
            margin-right: 10px;
        }

        .ul2 li:hover {
            background-color: red;
            color: #fff;
        }

        .ul2 li:first-child {
            background-color: red;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 主体部分 -->
        <ul class="ul1" id="ul1">
            <li><img src="img/1.jpg" alt="" width="1000" height="460"></li>
            <li><img src="img/2.jpg" alt="" width="1000" height="460"></li>
            <li><img src="img/3.jpg" alt="" width="1000" height="460"></li>
            <li><img src="img/5.jpg" alt="" width="1000" height="460"></li>
        </ul>
        <!-- 左按钮 -->
        <div class="left-button indexs" id="left-button">&lt;</div>
        <!-- 右按钮 -->
        <div class="right-button indexs" id="right-button">&gt;</div>
        <!-- 下面的小圆圈 -->
        <ul class="ul2 indexs" id="ul2">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

    <script type="text/javascript">
        // 获取所有的li里面的图片
        var imgs = document.getElementById('ul1').children;
        // 获取左边的按钮
        var leftbutton = document.getElementById('left-button');
        // 获取右边的按钮
        var rightbutton = document.getElementById('right-button');
        // 获取下面的小圆圈
        var button = document.getElementById('ul2').children;
        // 设置索引号，方便查找li
        var index = 0;
        // 设置定时器
        var dingshiqi;
        // 刚开始先调用一次函数chong
        chong();
        function chong() {
            // 定时器
            dingshiqi = setInterval(function () {
                // 索引号递增
                index++;
                // 如果当前索引号等于轮播图中图片的长度(就是到轮播图的最后一张图片时)
                if (index == imgs.length) {
                    // 让索引号变成0，从第一张图片开始轮播
                    index = 0;
                }
                // 循环图片
                for (var i = 0; i < imgs.length; i++) {
                    // 将所有图片的层级降低
                    imgs[i].style.cssText = 'z-index:0';
                    // 将所有小圆按钮清除样式
                    button[i].style.cssText = 'background-color:#fff;color:#000';
                }
                // 提高当前图片的索引号
                imgs[index].style.cssText = 'z-index:100';
                //给当前小圆按钮设置样式
                button[index].style.cssText = 'background-color:red;color:#fff';
            }, 2000);
        }
        // 点击左侧的按钮触发
        leftbutton.onclick = function () {
            // 清除定时器
            clearInterval(dingshiqi);
            // 让索引号递减
            index--;
            //如果当前索引号等于第一张图片的索引号时(就是到轮播图的第一张图片时)
            if (index < 0) {
                // 索引号变成最后一张图片的索引号
                index = imgs.length - 1;
            }
            // 循环图片
            for (var i = 0; i < imgs.length; i++) {
                // 将所有图片的层级降低
                imgs[i].style.cssText = 'z-index:0';
                // 将所有小圆按钮清除样式
                button[i].style.cssText = 'background-color:#fff;color:#000';
            }
            // 提高当前图片的索引号
            imgs[index].style.cssText = 'z-index:100';
            //给当前小圆按钮设置样式
            button[index].style.cssText = 'background-color:red;color:#fff';
            // 开启定时器
            chong();
        }
        // 点击右侧的按钮触发
        rightbutton.onclick = function () {
            // 清除定时器
            clearInterval(dingshiqi);
            index++;
            if (index > imgs.length - 1) {
                index = 0;
            }
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].style.cssText = 'z-index:0';
                button[i].style.cssText = 'background-color:#fff;color:#000';
            }
            imgs[index].style.cssText = 'z-index:100';
            button[index].style.cssText = 'background-color:red;color:#fff';
            chong();
        }
        // 当点击第一个小圆点时触发
        button[0].onclick = function () {
            // 清除定时器
            clearInterval(dingshiqi);
            // 设置当前索引号为0
            index = 0;
            // 循环图片
            for (var i = 0; i < imgs.length; i++) {
                // 将所有图片的层级降低
                imgs[i].style.cssText = 'z-index:0';
                // 将所有小圆按钮清除样式
                button[i].style.cssText = 'background-color:#fff;color:#000';
            }
            // 提高当前图片的索引号
            imgs[index].style.cssText = 'z-index:100';
            //给当前小圆按钮设置样式
            button[0].style.cssText = 'background-color:red;color:#fff';
            // 开启定时器
            chong();
        }
        button[1].onclick = function () {
            clearInterval(dingshiqi);
            index = 1;
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].style.cssText = 'z-index:0';
                button[i].style.cssText = 'background-color:#fff;color:#000';
            }
            imgs[index].style.cssText = 'z-index:100';
            button[1].style.cssText = 'background-color:red;color:#fff';
            chong();
        }
        button[2].onclick = function () {
            clearInterval(dingshiqi);
            index = 2;
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].style.cssText = 'z-index:0';
                button[i].style.cssText = 'background-color:#fff;color:#000';
            }
            imgs[index].style.cssText = 'z-index:100';
            button[2].style.cssText = 'background-color:red;color:#fff';
            chong();
        }
        button[3].onclick = function () {
            clearInterval(dingshiqi);
            index = 3;
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].style.cssText = 'z-index:0';
                button[i].style.cssText = 'background-color:#fff;color:#000';
            }
            imgs[index].style.cssText = 'z-index:100';
            button[3].style.cssText = 'background-color:red;color:#fff';
            chong();
        }

    </script>
</body>

</html>
chili_fan
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js实现小米中的轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { .
复制链接

扫一扫