當前位置:編程學習大全網 - 源碼下載 - js實現圖片自動的滾動效果

js實現圖片自動的滾動效果

自動滾動,主要思路是用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>

  • 上一篇:為什麽51無法登錄?
  • 下一篇:八老爺源碼,有什麽源碼?
  • copyright 2024編程學習大全網