2020-12-01

最新推荐文章于 2025-12-02 22:03:53 发布

原创最新推荐文章于 2025-12-02 22:03:53 发布 · 124 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #css

博客主要介绍了轮播图自动播放的相关内容，包括左右点击切换效果、小圆点鼠标hover切换效果以及自动播放切换效果，还提及了lunbotu.html文件。

轮播图（自动播放）

左右点击切换效果
小圆点鼠标hover切换效果
自动播放切换效果

lunbotu.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/lunbotu.css">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <img src="./image/1.jpg" alt="" id="img">
        <div id="top1">1/4</div>
        <div id="bottom">美女1</div>
        <button id="left"><</button>
        <button id="right">></button>
        <div class="btn">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script>
        var img = document.getElementById("img");
        var box = document.getElementsByClassName("box")[0];
        var top1 = document.getElementById("top1");
        var bottom = document.getElementById("bottom");
        var right = document.getElementById("right");
        var left = document.getElementById("left");
        var span = document.getElementsByTagName("span");
        var arr = [{
            img: "./image/1.jpg",
            title: "美女1"
        }, {
            img: "./image/2.jpg",
            title: "美女2"
        }, {
            img: "./image/3.jpg",
            title: "美女3"
        }, {
            img: "./image/4.jpg",
            title: "美女4"
        }]

        var i = 0;
        span[0].className = "hover";

        function timeLast() {
            i++;
            if (i == 4) {
                i = 0;
            }
            fun();
        }
        var timer = setInterval(timeLast, 3000)
        box.onmouseover = function() {
            clearInterval(timer);
        }
        box.onmouseout = function() {
            timer = setInterval(timeLast, 3000);
        }
        right.onclick = function() {
            i++;
            if (i == arr.length) {
                i = 0;
            }
            fun();
        }
        left.onclick = function() {
            i--;
            if (i == -1) {
                i = arr.length - 1;
            }
            fun();
        }

        for (var j = 0; j < span.length; j++) {
            span[j].index = j;
            span[j].onmouseover = function() {
                for (var l = 0; l < span.length; l++) {
                    span[l].className = "";
                }
                this.className = "hover";
                img.src = arr[this.index].img;
                top1.innerText = (this.index + 1) + "/4";
                bottom.innerText = arr[this.index].title;
                i = this.index;
            }
        }

        function fun() {
            for (var k = 0; k < span.length; k++) {
                span[k].className = "";
            }
            span[i].className = "hover";
            img.src = arr[i].img;
            top1.innerText = (i + 1) + "/4";
            bottom.innerText = arr[i].title;
        }
    </script>
</body>

</html>

效果：
在这里插入图片描述
图片：