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

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

一开始遇到了个问题，ul的样式是外部样式，所以代码oUl.style.left=oUl.offsetLeft-2+'px'有问题，程序跑不了，style不能取外部样式，谨记！

定时器
开启定时器
setInterval 间隔型
setTimeout 延时型
停止定时器
clearInterval
clearTimeout

posted on 2015-03-04 18:32 文森博客阅读(833) 评论(0) 编辑收藏举报