JS实现轮播图-无缝衔接

最新推荐文章于 2024-08-30 11:20:32 发布

清欢灬

最新推荐文章于 2024-08-30 11:20:32 发布

阅读量1.2k

点赞数

文章标签： js css

本文链接：https://blog.csdn.net/a754334599/article/details/114293297

版权

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

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

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

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

function move(node, obj, callback) {
    // node节点也是一个对象。 可以自定义属性。
    clearInterval(node.timer);
    node.timer = setInterval(function() {
        //所有的运动都已经完成
        var isEnd = true;
        for (const attr in obj) {
            if (obj.hasOwnProperty(attr)) {
                //attr 属性名
                //ITarget，变化的值
                const iTarget = obj[attr];
                //获取运动的样式的当前数值
                var icur = null;
                if (attr == "opacity") {
                    icur = parseInt(getStyle(node, attr) * 100);
                } else {
                    icur = parseInt(getStyle(node, attr));
                }
                var speed = (iTarget - icur) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                //位置数值先运算。此时还未发生移动。
                icur += speed;
                if ((speed >= 0 && iTarget > icur) || (speed <= 0 && iTarget < icur)) {
                    //未完成情况
                    isEnd = false;
                } else {
                    //已完成
                    icur = iTarget;
                }
                //将运动的结果赋值给节点
                if (attr == "opacity") {
                    node.style.opacity = icur / 100;
                    node.style.filter = "alpha(opacity=" + icur + ")";
                } else {
                    node.style[attr] = icur + "px";
                }

            }
        }
        if (isEnd) {
            clearInterval(node.timer);
            //开始下一个运动，不能写死，
            if (callback) {
                callback();
            }
        }

    }, 30)
}
//obj 元素 attr 样式的属性
function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj)[attr];
    }
}

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

<!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简单的轮播。