js原生网页轮播图

小咪咪 2023-07-07 08:22 43阅读 0赞

轮播图也称为焦点图，是网页中比较常见的网页特效。

功能需求：

1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。

2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。

3.图片播放的同时，下面小圆圈模块跟随一起变化。

4.点击小圆圈，可以播放相应图片。

5.鼠标不经过轮播图，轮播图也会自动播放图片。

6.鼠标经过，轮播图模块， 自动播放停止。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70][]

<!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;
            }
            .box {
                width: 600px;
                margin: 100px auto;
            }
            ul {
                list-style-type: none;
            }
            .carousel {
                width: 400px;
                height: 300px;
                position: relative;
                overflow: hidden;
            }
            .img_box {
                width: 1000%;
                position: absolute;
                top: 0;
                left: 0;
            }
            .img_box>li {
                width: 400px;
                height: 300px;
                float: left;
            }
            .img_box img {
                width: 100%;
                height: 100%;
            }
            /* 小圆点 */
            .circle {
                position: absolute;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
            }
            .circle>li {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                z-index: 999;
                float: left;
                cursor: pointer;
                margin: 0 2px;
                border: 1px solid #fff;
            }
            /* 当前的小圆圈的属性 */
            .current {
                background-color: rgb(12, 151, 231);
            }
            /* 左右箭头 */
            .arrow_l,
            .arrow_r {
                display: none;
                width: 20px;
                height: 30px;
                line-height: 30px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                cursor: pointer;
                color: #fff;
                background-color: rgba(0, 0, 0, 0.3);
            }
            .arrow_l {
                left: 0;
            }
            .arrow_r {
                right: 0;
            }
        </style>
        <script>
            function animate(obj, target, callback) {
                clearInterval(obj.timer)
                obj.timer = setInterval(() => {
                    var step = (target - obj.offsetLeft) / 10
                    step = step > 0 ? Math.ceil(step) : Math.floor(step)
                    if (obj.offsetLeft === target) {
                        clearInterval(obj.timer)
                        if (callback) {
                            callback()
                        }
                    }
                    obj.style.left = obj.offsetLeft + step + 'px'
                }, 40)
            }
        </script>
    </head>
    <body>
        <div class="box">
            <div class="carousel">
                <ul class="img_box">
                    <li>
                        <img src="https://img20.360buyimg.com/pop/s1180x940_jfs/t1/97387/34/12164/100157/5e43baa4E7b795f4f/4cb92be048a9887b.jpg.webp"
                            alt="">
                    </li>
                    <li>
                        <img src="https://img14.360buyimg.com/pop/s1180x940_jfs/t1/89848/10/12256/91672/5e46b2e3E740d1716/7050739bdb8e63c3.jpg.webp"
                            alt="">
                    </li>
                    <li>
                        <img src="https://img20.360buyimg.com/babel/s1180x940_jfs/t1/100441/5/12532/101378/5e4a3b4eE4c807442/bf61190512946daa.jpg.webp"
                            alt="">
                    </li>
                    <li>
                        <img src="https://img20.360buyimg.com/da/s1180x940_jfs/t1/83199/32/11887/78419/5d955012E3582c262/047dd81ea3800552.jpg.webp"
                            alt="">
                    </li>
                    <li>
                        <img src="https://img20.360buyimg.com/da/s1180x940_jfs/t1/64012/39/2832/228403/5d11cc79E3890bf51/9269eed2bca2c083.jpg.webp"
                            alt="">
                    </li>
                </ul>
                <ul class="circle"></ul>
                <div class="arrow_l"><</div>
                <div class="arrow_r">></div>
            </div>
        </div>
        <script>
            // 声明全局变量num,点击一次右切换,自增1,让这个变量*图片的宽度,就是ul的滚动距离
            var num = 0
            // 控制小圆圈的播放
            var circle = 0
            // 获取每个图片li的宽度
            var img_width = document.querySelector(".img_box>li").offsetWidth
            var img_box = document.querySelector(".img_box")
            // 小圆点盒子
            var circle_box = document.querySelector(".circle")
            var arrow_l = document.querySelector(".arrow_l")
            var arrow_r = document.querySelector(".arrow_r")
            var carousel = document.querySelector(".carousel")
            // 鼠标经过轮播图,显示左面和右面的按钮
            carousel.addEventListener("mouseenter", function () {
                arrow_l.style.display = "block"
                arrow_r.style.display = "block"
                // 停止自动轮播
                clearInterval(timer)
                // 并清除定时器所占的内存
                timer = null
            })
            carousel.addEventListener("mouseleave", function () {
                arrow_l.style.display = "none"
                arrow_r.style.display = "none"
                // 鼠标离开,继续轮播
                timer = setInterval(() => {
                    arrow_r.click()
                }, 2000)
            })
            // 创建圆点li
            for (var i = 0; i < img_box.children.length; i++) {
                var li = document.createElement("li")
                circle_box.appendChild(li)
                // 设置自定义属性，记录小圆圈的索引号
                li.setAttribute("index", i)
                // 小圆圈点击事件切换图片
                li.addEventListener("click", function () {
                    //    排他
                    for (var i = 0; i < circle_box.children.length; i++) {
                        // console.log(circle_box.children.length)
                        circle_box.children[i].className = ""
                    }
                    // 当前点击的加类名
                    this.className = "current"
                    // 点击某个小圆点可得到当前小圆点的索引
                    // 点击小圆圈移动图片 img_box的移动距离是小圆圈的索引*每个li图片的宽度(负值)
                    var index = this.getAttribute('index')
                    // 当点击了某个小圆点,就把当前的小圆点索引号给num(目的是解决点击右面切换,小圆点的索引错乱)
                    num = index
                    //当点击了某个小圆圈也要把小圆点的索引一并更新为当前图片的索引
                    circle = index
                    // 也可以连着写
                    // num=index=circle 
                    animate(img_box, -index * img_width)
    
                })
            }
            // 默认把小圆点对应的第一张图片设置为current类名
            circle_box.children[0].className = "current"
            // 克隆第一张图片放到最后面(深克隆)
            var first = img_box.children[0].cloneNode(true)
            img_box.appendChild(first)
            // 右面按钮点击
            arrow_r.addEventListener("click", function () {
                if (num === img_box.children.length - 1) {
                    img_box.style.left = 0
                    num = 0
                }
                num++
                animate(img_box, -num * img_width)
                // 每次让小圆点也++
                circle++
                /*  如果小圆点走到了最后那个小圆点,那么图片已经到
                了最后那个小圆点+1,也就是克隆的那张图片,就让小圆点归零*/
                if (circle == circle_box.children.length) {
                    circle = 0
                }
                // 小圆圈排他
                for (var i = 0; i < circle_box.children.length; i++) {
                    circle_box.children[i].className = ''
                }
                //    留下当前小圆圈的类名
                circle_box.children[circle].className = "current"
            })
            // 左面按钮点击
            /*当点击到第一一张图片时,立即让图片盒子的left值到最后克隆的这张图片的左面,也就是不算最后克隆的图片的宽度*/
            // 获取最后一张图片的位置: 总图片的个数-1*图片的宽度
            arrow_l.addEventListener("click", function () {
                if (num === 0) {
                    num = img_box.children.length - 1
                    img_box.style.left = -num * img_width + 'px'
                }
                num--
                animate(img_box, -num * img_width)
                circle--
                // 如果circle<0 说明时第一张图片,circle要更改到最后一个(最后一个的索引应该是length-1)
                if (circle < 0) {
                    circle = circle_box.children.length - 1
                }
                // 小圆圈排他
                for (var i = 0; i < circle_box.children.length; i++) {
                    circle_box.children[i].className = ''
                }
                //    留下当前小圆圈的类名
                circle_box.children[circle].className = "current"
            })
            // 自动播放轮播图
            var timer = setInterval(() => {
                arrow_r.click()
            }, 2000)
        </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200221230319780.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk=,size_16,color_FFFFFF,t_70