當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS定时器的使用--无缝滚动
生活随笔
收集整理的這篇文章主要介紹了
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
轉載于:https://www.cnblogs.com/919czzl/p/4314066.html
總結
以上是生活随笔為你收集整理的JS定时器的使用--无缝滚动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 高效执行 协作共赢
- 下一篇： gradle idea java ssm