JavaScript无缝滚动

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{margin:0;

        padding: 0;

        }

        #div1{

            width:1320px;

            height:213px;

            margin:100px auto;

            position: relative;

            background: red;

            overflow: hidden;

        }

        #div1 ul{

            position: absolute;

            left:0;

            top:0;

        }

        #div1 ul li{

        float: left;

        width:330px;

        height:213px;

        list-style: none;

        }

    </style>

    <script>

        window.onload=function(){

            var oDiv=document.getElementById('div1');

            var oUl=oDiv.getElementsByTagName('ul')[0]

            var aLi=oUl.getElementsByTagName('li');

            var speed=2;

            oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;

            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);

            }

        }

    </script>

</head>

<body>

<div id="div1">

    <ul>

        <li><img src="img/1.jpg"/></li>

        <li><img src="img/2.jpg"/></li>

        <li><img src="img/3.jpg"/></li>

        <li><img src="img/4.jpg"/></li>

    </ul>

</div>

</body>

</html>
巴特西

JavaScript无缝滚动

最新文章

热门文章
