JS实现轮播图-无缝衔接

叁歲伎倆 2022-10-23 15:26 244阅读 0赞

**在这里封装了一个改变元素节点的运动的函数，使用的时候只要调用即可：**

1、第一个参数是要操作元素节点。

2、第二个参数是一个对象存放样式名和对应样式的目标值。

3、第三个参数是回调函数，在不需要的时候可以不传入，作用是在多个样式改变时让样式依次改变：

通过引用以上放法实现轮播图：

<!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>
            * {
                margin: 0;
                padding: 0;
            }
            
            #box {
                width: 950px;
                height: 600px;
                margin: 20px auto;
                position: relative;
                overflow: hidden;
            }
            
            #imgs {
                list-style: none;
                width: 4750px;
                height: 600px;
                position: absolute;
                left: 0;
            }
            
            #imgs li {
                width: 950px;
                height: 600px;
                float: left;
            }
            
            #imgs li img {
                width: 100%;
                height: 100%;
            }
            
            #btns {
                width: 120px;
                height: 50px;
                line-height: 50px;
                position: absolute;
                bottom: 20px;
                right: 40px;
                background-color: aqua;
            }
        </style>
    </head>
    
    <body>
        <div id="box">
            <div id="btns">
                <span></span><span></span><span></span>
                <span></span>
            </div>
            <ul id="imgs">
                <li>
                    <img src="img/1.jpg" alt="">
                </li>
                <li>
                    <img src="img/2.jpg" alt="">
                </li>
                <li>
                    <img src="img/3.jpg" alt="">
                </li>
                <li>
                    <img src="img/4.jpg" alt="">
                </li>
                <li>
                    <img src="img/1.jpg" alt="">
                </li>
            </ul>
        </div>
    </body>
    <script src="js/untils.js"></script>
    <script>
        //获取元素节点
        var imgs = document.getElementById("imgs");
        var lis = document.querySelectorAll("img");
        setInterval(function() {
            move(imgs, {
                    left: imgs.offsetLeft - 950,
                },
                function() {
                    //当最后一张图片走完后，应该让整个ul回到起点位置。
                    if (imgs.offsetLeft <= -(lis.length - 1) * 950) {
                        imgs.style.left = "0px";
                    }
                }
            )
        }, 2000)
    </script>
    
    </html>

以上代码就完成了js简单的轮播。