用js实现banner图效果

最新推荐文章于 2025-03-16 14:11:33 发布

OrdnAry

最新推荐文章于 2025-03-16 14:11:33 发布

阅读量1.6k

点赞数

分类专栏：学习文章标签： js css html

本文链接：https://blog.youkuaiyun.com/OrdnAry/article/details/108382559

版权

学习专栏收录该内容

59 篇文章

订阅专栏

函数startMove的实现

function startMove(node, cssObj, complete){//complete = show;
    clearInterval(node.timer);
    node.timer = setInterval(function(){
        var isEnd = true; //假设所有的动画都到达目的值。
        for(var attr in cssObj){
            var iTarget = cssObj[attr];
            //计算速度
            var iCur = null;
            if(attr == "opacity"){
                iCur = parseInt(parseFloat(getStyle(node, "opacity")) * 100);
            }else{
                iCur = parseInt(getStyle(node, attr))
            }
            
            var speed = (iTarget - iCur) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            
            if(attr == "opacity"){
                iCur += speed;
                node.style.opacity = iCur / 100;
                node.style.filter = "alpha(opacity=" + iCur +  ")";
            }else{
                node.style[attr] = iCur + speed + 'px';
            }  

            if(iCur != iTarget){
                isEnd = false;
            }
        }

        if(isEnd){
            clearInterval(node.timer);
            if(complete){
                complete.call(node);
            }
        }
    }, 30);
}

//获取当前有效样式浏览器兼容的写法
function getStyle(node, cssStr){
    return node.currentStyle ? node.currentStyle[cssStr] : getComputedStyle(node)[cssStr];
}

引入函数startMove  并且写出整体代码

<!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;}
        #div{width:400px;height:400px;margin: 200px auto;border: 1px solid black;position: relative;overflow: hidden;}
        #ul {width:1600px;height:400px;position: absolute; left: 0px;}
        #ul li{width:400px;height:400px;float: left;list-style: none;}
        #ul li img{width: 100%;height: 100%;}
    </style>
     <script src = "../startMove.js"></script>
    <script>
        window.onload = function(){
            var div = document.getElementById("div");
            var ul = document.getElementById("ul");

            ul.innerHTML +=ul.innerHTML;
            ul.style.width = 1600 * 2 +"px";
            setInterval(function(){
                startMove(ul,{left:ul.offsetLeft - 400},function(){
                    if(ul.offsetLeft <= - ul.offsetWidth /2){
                        ul.style.left = 0 +"px";
                    }
                });
            },2000);
        }
    </script>
</head>
<body>
    <div id="div">
        <ul id ="ul">
            <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>
        </ul>
    </div>
</body>
</html>