JavaScript學習筆記之基于定時器實現(xiàn)圖片無縫滾動功能詳解
本文實例講述了JavaScript學習筆記之基于定時器實現(xiàn)圖片無縫滾動功能。分享給大家供大家參考，具體如下：
一、無縫滾動理論基礎
基礎知識
1.setInterval（function，time）、clearInterval（timer）
setInterval() 方法可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式。
setInterval() 方法會不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。
clearInterval() 方法可取消由 setInterval() 設置的 timeout。
clearInterval() 方法的參數(shù)必須是由 setInterval() 返回的 ID 值。
2.offsetLeft與style.left的區(qū)別
offsetLeft 獲取的是相對于父對象的左邊距
left 獲取或設置相對于 具有定位屬性(position定義為relative)的父對象 的左邊距
如果父div的position定義為relative,子div的position定義為absolute，那么子div的style.left的值是相對于父div的值，
這同offsetLeft是相同的，區(qū)別在于：
1. style.left 返回的是字符串，如28px，offsetLeft返回的是數(shù)值28，如果需要對取得的值進行計算，還用offsetLeft比較方便。
2. style.left是讀寫的，offsetLeft是只讀的，所以要改變div的位置，只能修改style.left。
3. style.left的值需要事先定義，否則取到的值為空。而且必須要定義在html里，我做過試驗，如果定義在css里，style.left的值仍然 為空，這就是我剛開始碰到的問題，總是取不到style.left的值。
offsetLeft則仍然能夠取到，無需事先定義div的位置。
二、代碼片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>無縫滾動</title>
<style>
*{
margin: 0;
padding: 0;
}
#div2{
width: 400px;
margin: 100px auto;
}
input{
margin:0 auto;
text-align: center;
margin-left: 80px;
font-size: 40px;
}
#div1{
width: 712px;
height: 108px;
margin: 100px auto;
position: relative;
background-color: red;
overflow: hidden;
}
#div1 ul{
position: absolute;
left: 0;
top: 0;
}
#div1 ul li{
float: left;
width: 178px;
height: 108px;
list-style:none;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var lBtn=document.getElementById('lbtn');
var rBtn=document.getElementById('rbtn');
//將ul復制一份相加復制給ul（這樣ul相當于有8張圖片）
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
//speed控制圖片移動方向和速度
var speed=2;
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';
}
var timer=setInterval(move,30);
// 鼠標移進時，圖片停止運動
oDiv.onmouseover=function(){
clearInterval(timer);
};
//鼠標移出時，圖片繼續(xù)移動
oDiv.onmouseout=function(){
timer=setInterval(move,30);
}
//按鈕控制移動方向
lBtn.onclick= function () {
speed=-2;
}
rBtn.onclick=function(){
speed=2;
}
};
</script>
</head>
<body>
<div id="div2" >
<input type="button" value="向左" id="lbtn"/>
<input type="button" value="向右" id="rbtn"/>
</div>
<div id="div1">
<ul>
<li><img src="images/1.jpg" alt=""/></li>
<li><img src="images/2.jpg" alt=""/></li>
<li><img src="images/3.jpg" alt=""/></li>
<li><img src="images/4.jpg" alt=""/></li>
</ul>
</div>
</body>
</html>
三、效果圖
更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
這篇文章主要為大家詳細介紹了js定時器實現(xiàn)倒計時效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
登錄頁面在框架內(nèi)打開，想讓它直接跳出框架打開（這里不是打開新窗口），終于在網(wǎng)上找到了辦法，下面分享給大家2014-09-09
javascript中export?和export?default的區(qū)別
本文主要介紹了javascript中export?和export?default的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
JavaScript hasOwnProperty() 函數(shù)實例詳解
JavaScript 繼承 封裝 多態(tài)實現(xiàn)及原理詳解
JS函數(shù)參數(shù)的傳遞與同名參數(shù)實例分析
