JS小练————轮播图（含注释，运行图）

最新推荐文章于 2024-05-23 23:33:04 发布

枫玄雾隐

最新推荐文章于 2024-05-23 23:33:04 发布

阅读量188

点赞数 44

文章标签： javascript css css3 html5

本文链接：https://blog.csdn.net/m0_45293340/article/details/126619507

版权

<!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>
    <script src="../js/缓动(回调).js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .all {
            width: 400px;
            height: 225px;
            /* border: 1px solid red; */
            position: relative;
            top: 150px;
            left: 400px;
            overflow: hidden;
        }

        ul {
            width: 400%;
            height: 200px;
            background-color: antiquewhite;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
        }

        img {
            width: 400px;
            float: left;
        }

        button {
            height: 100px;
            width: 80px;
            z-index: 2;
            position: relative;
            opacity: .3;
        }

        .b-left {
            top: 63px;
            display: none;
        }

        .b-right {
            top: -30px;
            left: 320px;
            display: none;
        }

        .yuan {
            height: 50px;
            /* background-color: aqua; */
            width: 300px;
            position: absolute;
            top: 190px;
            left: 50px;
            text-align: center;
            line-height: 50px;
            z-index: 2;
            display: flex;
            justify-content: center;
            flex-direction: row;
            align-items: center;
        }

        .yuan div {
            height: 10px;
            width: 10px;
            border-radius: 50%;
            background-color: rgba(273, 273, 283, .8);
            margin-left: 5px;
            cursor: pointer;
        }

        .yuan .red {
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- <div class="red"></div> -->
    <div class="all">
        <button class="b-left">&lt;</button>
        <button class="b-right">&gt;</button>
        <ul>
            <li><img src="../img/1.png" alt=""></li>
            <li><img src="../img/2.jpg" alt=""></li>
            <li><img src="../img/4.jpg" alt=""></li>
            <li><img src="../img/3.jpg" alt=""></li>
            <!-- <li><img src="../img/1.png" alt=""></li> -->
            <li><img src="../img/1.png" alt=""></li>
        </ul>
        <div class="yuan">

        </div>
    </div>
    <script>
        let all = document.querySelector(".all")
        let ul = document.querySelector("ul")
        let li = document.querySelectorAll("li")
        let bl = document.querySelector(".b-left")
        let br = document.querySelector(".b-right")
        let yuan = document.querySelector(".yuan")
        // 引入元素
        let num = 0
        // 图片的位置
        let yd = 0
        // 小圆点的位置
        ul.style.width = li.length * 400 + "px"
        // 设置ul宽度，随图片多少而变化
        all.addEventListener("mouseenter", function () {
            // 鼠标经过事件
            bl.style.display = "block"
            br.style.display = "block"
            // 左右按钮显示
            clearInterval(auto)
            // 清除定时器
            auto = null
        })
        all.addEventListener("mouseleave", function () {
            // 鼠标离开事件
            bl.style.display = "none"
            br.style.display = "none"
            // 左右按钮隐藏
            auto = setInterval(function () {
                br.click()
            }, 2000)
            // 调用定时器
        })
        br.addEventListener("click", function () {
            if (num == li.length - 1) {
                ul.style.left = 0 + "px"
                num = 0
                // 如果到最后一页，点击右按钮回到第一页，重置num
            }
            num++
            animation(ul, -400 * num)
            // 调用缓动函数
            yd++
            if (yd == li.length - 1) {
                yd = 0
                // 如果小圆点到最后，则点击调回第一张
            }
            yuanmove()
            // 调用圆点移动函数
        })
        bl.addEventListener("click", function () {
            // 左按钮点击事件
            if (num == 0) {
                num = li.length - 1
                ul.style.left = -num * 400 + "px"
                // 如果在第一张，点击左按钮则跳转最后一张
            }
            num--
            animation(ul, -400 * num)
            // 调用缓动函数
            yd--
            yd = yd < 0 ? yuan.children.length - 1 : yd
            // 若小圆点位置为负数则变为最后一张位置
            yuanmove()
        })
        for (i = 0; i < li.length - 1; i++) {
            let div = document.createElement("div")
            // 创建div在yuan内
            div.setAttribute("index", i)
            // 给div编写编号
            yuan.appendChild(div)
            // 将div加入yuan中
            yuan.children[0].className = "red"
            // 默认第一个圆点为红色
            div.addEventListener("click", function () {
                // 圆点点击事件
                for (j = 0; j < li.length - 1; j++) {
                    yuan.children[j].className = " "
                    // 循环清除圆点样式
                }
                this.className = "red"
                // 点击的圆点赋予属性
                let index = this.getAttribute("index")
                // 获取index
                num = index
                // index赋予num
                yd = index
                // index赋予yd
                animation(ul, -index * 400)
                // 调用缓动
            })
        }
        function yuanmove() {
            // 圆点移动函数
            for (i = 0; i < yuan.children.length; i++) {
                yuan.children[i].className = ""
                // 遍历清空样式
            }
            yuan.children[yd].className = "red"
            // 当前赋予样式
        }
        let auto = setInterval(function () {
            // 自动播放定时器
            br.click()
            // 自动点击右按钮
        }, 2000)
    </script>
</body>
</html>