javascript轮播图

最新推荐文章于 2024-08-10 16:15:00 发布

丽绮

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量41

点赞数

分类专栏： JavaSript 文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_59861678/article/details/129199655

版权

JavaSript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            border: 0;
            height: 100%;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            margin: 50px auto;
            /* border: solid 1px red; */
            width: 800px;
        }

        ul li {
            display: none;
        }

        ul img {
            width: 800px;
            /* border-radius: 5px; */
        }

        ul li.current {
            display: block;
        }
    </style>
</head>

<body>
    <ul>
        <li class="current"><img src="./img/16A8A5D404D25B7122599C9D0E9454A9.jpg"></li>
        <li><img src="./img/6e26f31787ec43208d69e8c5b93b39c3.jpg"></li>
        <li><img src="./img/8D6406963A74E41ADF344D522B7520F9.jpg"></li>
        <li><img src="./img/F90A17081A1668C175DBC36893B9E6BA.jpg"></li>
    </ul>


    <script>
        // 首先获取需要操作的标签
        var Lis = document.querySelectorAll("ul li")
        // 记录索引值
        var arr01 = 0;

        // 定时器
        setInterval(() => {
            arr01++;
            for (var i = 0; i < Lis.length; i++) {
                Lis[i].className = ''    //取消Lis变量里的class标签（循环到哪就显示谁）

            }

             // 当图片走到末尾图片时，让图片重新显示第一张
             if (arr01 === Lis.length) {
                    arr01 = 0
                }

            // 给Lis变量添加class=“current”,谁拥有class谁就能显示，其余的继续保持隐藏
            // 首先我们在上面的for循环中已经取消了所有的class
            Lis[arr01].className = 'current'

        }, 1000)  // 一秒一次


    </script>
</body>

</html>