原生js 实现的轮播图效果-CSDN博客

本文链接：https://blog.csdn.net/YCHH1/article/details/123709422

<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>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        #content {
            width: 750px;
            height: 300px;
            margin: 30px;

            border: 1px solid #000;

            position: relative;
        }

        .left,
        .right {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);

            padding: 5px 6px;
            font-size: 36px;
            font-weight: bold;
            background-color: black;
            opacity: 0.4;
            color: white;
            cursor: pointer;
        }

        .right {
            right: 0;
        }
        .slide-nav {
            display: flex;
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }
        li {
            border-radius: 50%;
            margin-right: 10px;
            cursor: pointer;
            border: solid 5px white;
        }
        .on {
            border-color: red;
        }
    </style>
</head>

<body>
    <div id="content">
        <img src="./images/1.png" alt="" id="img">
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>

        <ul class="slide-nav">
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        // 获取相关元素
        var content = document.getElementById("content");
        var img = document.getElementById("img");
        var left = document.querySelector(".left");
        var right = document.querySelector(".right");
        var lis = document.getElementsByTagName("li");
        console.log(left, right);


        var arr = ["./images/1.png", "./images/2.png", "./images/3.png", "./images/4.png", "./images/5.png", "./images/6.png"];

        // 切换图片的索引 
        var num = 0;

        // 底部导航的切换和图片的切换
        function change(){
            img.src = arr[num];

            // 底部导航
            for(var i = 0;i<lis.length;i++){
                lis[i].classList.remove("on")
            }
            lis[num].classList.add("on")
        }

        // 设置图片的自动切换
        var timer = setInterval(slide, 1000);

        function slide() {
            num++;
            if (num === arr.length) {
                num = 0;
            }
            change()
        }

        // 鼠标进入停止轮播
        content.onmouseover = function () {
            clearInterval(timer);
            left.style.opacity = "0.8"
            right.style.opacity = "0.8"
        }
        // 鼠标离开继续轮播
        content.onmouseout = function () {
            timer = setInterval(slide, 1000)
            left.style.opacity = "0.4"
            right.style.opacity = "0.4"
        }

        // 点击左侧的按钮操作
        left.onclick = function () {
            num--;
            if (num < 0) {
                num = arr.length - 1;
            }

            change()
        }

        // 点击 right 
        right.onclick = function () {
            slide()
        }

        // 点击 底部导航的切换
        for (var i = 0; i < lis.length; i++) {
            lis[i].index = i;
            lis[i].onclick = function () {
                num = this.index;
                change()
            }
        }
    </script>
</body>