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