无缝滚动练习

<html>
<head>
    <title></title>
    <style type="text/css">
        #test{
            width:300px;
            height:55px;
            overflow:hidden;
            position:relative;
            border:1px solid red;
        }
        ul{
            margin:0;
            padding:0;
            list-style:none;
            left:0;
            position:absolute;
        }
        li{
            float:left;
            display:block;
            width:50px;
            height:50px;
            border:1px solid black;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var oDiv=document.getElementById("test");
            var oUl=document.getElementsByTagName("ul")[0];
            var oLi=document.getElementsByTagName("li");
            var oA=document.getElementsByTagName("a");
            
            var timer=null;
            var iSpeed=3;
            
            oUl.innerHTML+=oUl.innerHTML;
            oUl.style.width=oLi.length*oLi[0].offsetWidth+'px';
            
            function fnMove(){
                if(oUl.offsetLeft<-oUl.offsetWidth/2){
                    oUl.style.left=0;
                }
                else if(oUl.offsetLeft>0){
                    oUl.style.left=-oUl.offsetWidth/2+'px';
                }
                oUl.style.left=oUl.offsetLeft+iSpeed+'px';
            };
            
            timer=setInterval(fnMove,30);
            
            oDiv.onmouseover=function(){
                clearInterval(timer);
            };
            oDiv.onmouseout=function(){
                timer=setInterval(fnMove,30);
            };
            oA[0].onclick=function(){
                iSpeed=-3;
            };
            oA[1].onclick=function(){
                iSpeed=3;
            };
        };
    </script>
</head>
<body>
<a href="####">向左</a>
<a href="####">向右</a>
<div id="test">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</div>
</body>
</html>
posted @ 2012-10-25 14:35  ``炯``  阅读(214)  评论(0编辑  收藏  举报