JavaScript-無縫滾動(offset)
阿新 • • 發佈：2019-01-06
無縫滾動用以網站圖片橫向自動滾動瀏覽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0;padding: 0; } img{ height:168px; width: 200px; } li{ list-style: none; float: left; } #div1{ height: 168px; width: 800px; margin: 100px auto; position: relative; overflow: hidden; } ul{ position: absolute; left: 0; top: o; } </style> </head> <body> <a href="javascript:;">向左</a> <a href="javascript:;">向右</a> <a href="javascript:;">加速</a> <a href="javascript:;">減速</a> <div id="div1"> <ul> <li><img src="照片/橋.jpg"></li> <li><img src="照片/彩虹.jpg"></li> <li><img src="照片/窗戶.jpg"></li> <li><img src="照片/煙霧.jpg"></li> </ul> </div> </body> <script> var oDiv=document.getElementById('div1'); var oUl=oDiv.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li'); 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'; // oUl.style.left=oUl.offsetLeft-2+'px'; //向右滾動 if(oUl.offsetLeft>0) oUl.style.left=-oUl.offsetWidth/2+'px'; oUl.style.left=oUl.offsetLeft+speed+'px'; } var timer=setInterval(move,30) 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; } //加速滾動 document.getElementsByTagName('a')[2].onclick=function(){ speed=speed+speed; } //減速滾動 document.getElementsByTagName('a')[3].onclick=function(){ speed=speed/2; } </script> </html>
1
offsetleft:用於獲取物體左邊距
offsetTop:用於獲取物體上邊距
offsetlWidth:用於獲取物體寬度
2
innerHTML用於獲取標籤內的內容
3
<a href="javascript:;"></a>
在執行該段程式碼時，去執行<script>裡呼叫該便籤的程式碼
4
margin：0px auto;