【JavaScript】轮播图

最新推荐文章于 2024-06-09 20:17:27 发布

Acrgi

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量31

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Acrgi/article/details/129482664

版权

<!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;}
        #ul1 li{list-style: none; width: 200px; height: 200px; margin: 5px; float: left;}
        #ul1 li img{width: 100%; height: 100%;}
        #ul1{position:absolute; left: 0px;}
        #div1{width: 1050px; height: 210px; border: 1px solid black; margin: 50px auto; position: relative;overflow: hidden;}
    </style>
    <script>
        window.onload = function(){
            var oUl1 =document.getElementById('ul1');
            var oDiv1 = document.getElementById("div1");
            //直接再在末尾加上五张照片
            oUl1.innerHTML += oUl1.innerHTML;
            //重新设置ul的宽
            oUl1.style.width = 210 * 10 +'px';
            
            
            //连续的动 不是完美运动
            // setInterval(function(){
            //     oUl1.style.left = oUl1.offsetLeft - 5 + 'px';
            //     if(oUl1.offsetLeft <= -oUl1.offsetWidth / 2){
            //         oUl1.style.left = "0px";
            //     }
            // },30)


            setInterval(function(){
                //让ul向左运动一个图片的宽
                startMove(oUl1,{left: oUl1.offsetLeft - 210},function(){
                    if(oUl1.offsetLeft <= -oUl1.offsetWidth / 2){
                        oUl1.style.left = "0px";
                    } 
                })
            },1000);
        }

        //完美运动
        function startMove(node, cssObj, complete){
            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)
        }
        //获取css样式
        function getStyle(node,cssStr){
            return node.currentStyle ? node.currentStyle[cssStr] : getComputedStyle(node)[cssStr];
        }
    </script>
</head>
<body>
    <div id = 'div1'>
        <ul id = 'ul1'>
            <li>
                <img src="/img/世界尽头.png" alt="">
            </li>
            <li>
                <img src="/img/奥林匹斯.png" alt="">
            </li>
            <li>
                <img src="/img/猪王峡谷.png" alt="">
            </li>
            <li>
                <img src="/img/破碎月亮.png" alt="">
            </li>
            <li>
                <img src="/img/风暴点.png" alt="">
            </li>
        </ul>
    </div>
</body>
</html>