自動滾動,主要思路是用js自帶的setInterval方法。
定義和用法
setInterval() 方法可按照指定的周期(以毫秒計)來調用函數或計算表達式。
setInterval() 方法會不停地調用函數,直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。
語法
setInterval(code,millisec[,"lang"])
參數
code 必需。要調用的函數或要執行的代碼串。
millisec 必須。周期性執行或調用 code 之間的時間間隔,以毫秒計。
返回值
壹個可以傳遞給 Window.clearInterval() 從而取消對 code 的周期性執行的值。
簡單的例子,僅供參考:
<style>*{?margin:0;?padding:0;?list-style:none;}
#box{?width:840px;?border:1px?solid?#000;?height:210px;?margin:30px?auto;?position:relative;?overflow:hidden;}
#box?ul{?position:absolute;?left:0;?top:0;}
#box?ul?li{?width:200px;?height:200px;?float:left;?padding:5px;}
</style>
<script>
window.onload=function(){
var?oBox=document.getElementById('box');
var?oUl=oBox.children[0];
var?aLi=oUl.children;
//復制壹份內容
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';
setInterval(function(){
var?l=oUl.offsetLeft+10;
if(l>=0){
l=-oUl.offsetWidth/2;
}
oUl.style.left=l+'px';
},30);
};
</script>
</head>
<body>
<div?id="box">
<ul>
<li><img?src="img/1.jpg"?width="200"></li>
<li><img?src="img/2.jpg"?width="200"></li>
<li><img?src="img/3.jpg"?width="200"></li>
<li><img?src="img/4.jpg"?width="200"></li>
</ul>
</div>
</body>