js的无缝滚动

<!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;}
        #div1 ul li{float: left;width:200px;height:200px;list-style: none;} 
        #div1 img{width:200px;height:200px;}
        #div1{width:800px;height:200px;margin: 100px auto;position: relative;background-color: red;overflow: hidden;}
        #div1 ul{position: absolute;top:0;left: 0;}
    </style>
    <script>
        window.onload=function()
        {
            var oDiv=document.getElementById('div1');
            var oUl=oDiv.getElementsByTagName('ul')[0]; //获取oDiv下的第一个ul
            var aLi=oUl.getElementsByTagName('li');
            var speed=2;  //定义一个全局变量
            oUl.innerHTML=oUl.innerHTML+oUl.innerHTML; //让那个ul里面的东西乘2
            oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';  
            function move(){
                if(oUl.offsetLeft<-oUl.offsetWidth/2)
                {
                    oUl.style.left='0';
                }
                if(oUl.offsetLeft>0)
                {

                    oUl.style.left=-oUl.offsetWidth/2+'px';
                }
                oUl.style.left=oUl.offsetLeft+speed+'px';
            
            }
           var timer=setInterval(move,30);
            oDiv.onmouseover=function()
            {
                clearInterval(timer);
            };

            oDiv.onmouseout=function()
            {
                timer=setInterval(move,30);
            };


            document.getElementsByTagName('a')[0].onclick=function()
            {
                speed=-2;
            };
            document.getElementsByTagName('a')[1].onclick=function()
            {
                speed=2;
            };
        };
    </script>
</head>
<body>
    <a href="javascript:;">向左走</a>
    <a href="javascript:;">向右走</a>
    <div id="div1">
        <ul>
            <li><img src="./无缝滚动图片/1.jpg /"></li>
            <li><img src="./无缝滚动图片/2.jpg /"></li>
            <li><img src="./无缝滚动图片/3.jpg /"></li>
            <li><img src="./无缝滚动图片/4.jpg /"></li>
        </ul>
    </div>
</body>
</html>
刺客伍六七
发布了14 篇原创文章 · 获赞 30 · 访问量 2913
私信关注
猜你喜欢
