JS定时器的使用--无缝滚动

浏览数：28 / 时间：2015年06月09日

<title>无标题文档</title>
<style>
* {margin:0; padding:0;}
#div1{width:1172px; height:220px; margin:100px auto; position:relative; background:red; overflow:hidden;}
#div1 ul li{float:left;width:293px; height:220px; 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 timer;
    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‘;
        };
    
    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 style="position:absolute; left:0; top:0;">
    <li><img src="images/05.jpg"/></li>
    <li><img src="images/05.jpg"/></li>
    <li><img src="images/05.jpg"/></li>
    <li><img src="images/05.jpg"/></li>
  </ul>
</div>
</body>