js實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)特效

低調(diào)渲染lh1sll 2017-08-03

展開(kāi)全文

首先，無(wú)縫滾動(dòng)的第一個(gè)重點(diǎn)就是——?jiǎng)印ｊP(guān)于怎么讓頁(yè)面的元素節(jié)點(diǎn)動(dòng)起來(lái)，這就得學(xué)明白關(guān)于JavaScript中定時(shí)器的相關(guān)知識(shí)。

　　JS中的創(chuàng)建定時(shí)器的方法包括兩種：setTimeout和setInterval。首先它們接收的參數(shù)相同：第一個(gè)參數(shù)是一個(gè)函數(shù)，用于定時(shí)器執(zhí)行，第二個(gè)參數(shù)是一個(gè)數(shù)字，代表過(guò)多少毫秒之后定時(shí)器執(zhí)行函數(shù)。它們的不同在于：setTimeout 是在經(jīng)過(guò)指定的時(shí)間之后，只執(zhí)行一次函數(shù)，而setInterval，則是每間隔指定時(shí)間，就執(zhí)行函數(shù)一次，說(shuō)簡(jiǎn)單點(diǎn)的話，就是setInterval是setTimeout的循環(huán)版。

　　關(guān)于定時(shí)器還有一個(gè)用法：消除定時(shí)器，方法同樣有兩種：clearTimeout 和 clearInterval，它們分別對(duì)應(yīng)不同類型的定時(shí)器。另外，它們都只接收一個(gè)參數(shù)，這個(gè)參數(shù)是定時(shí)器返回的一個(gè)值（我在chrome中調(diào)試發(fā)現(xiàn)這個(gè)返回值都是數(shù)字），用于指定消除那個(gè)定時(shí)器。

　　定時(shí)器的知識(shí)掌握之后，就開(kāi)始分析怎樣使用定時(shí)器讓元素動(dòng)起來(lái)。其實(shí)這個(gè)很簡(jiǎn)單，就是類似電影的原理一樣，讓元素在很短的時(shí)間內(nèi)發(fā)生連續(xù)的位移，我們看起來(lái)的話這個(gè)元素就想是在不停地運(yùn)動(dòng)啦。關(guān)于怎么讓元素產(chǎn)生位移，通過(guò)JS修改元素的樣式就可以實(shí)現(xiàn)，例如

1	`oUl.style.left = oUl.offsetLeft + speed +` `'px';`

　　上面的代碼中speed就是每次產(chǎn)生的位移。關(guān)于speed使用還挺有意思的：我們可以修改speed的正負(fù)值來(lái)修改滾動(dòng)的方向。

　　另外，關(guān)于元素的屬性 offsetLeft 我個(gè)人認(rèn)為需要注意兩點(diǎn)：offsetLeft的值由它自己通過(guò)定位的left和自己設(shè)定的margin的和、offsetLeft它是相對(duì)于它的包含層的距離（offsetTop類似）。當(dāng)然這都是我自己的理解，肯定不是很準(zhǔn)確，這個(gè)坑記著，下次專門解決它。

　　讓元素動(dòng)起來(lái)的原理基本就是這樣，下面開(kāi)始分析這個(gè)無(wú)縫滾動(dòng)展示圖片的實(shí)現(xiàn)方法，我舉得例子都是向左滾動(dòng)的,向右的原理一樣，代碼中有提到：

　　首先假設(shè)需要循環(huán)滾動(dòng)的圖片只有4張，為了滿足圖片滾動(dòng)起來(lái)有循環(huán)的要求，就需要把圖片如圖（1）這樣做：

　　這樣當(dāng)?shù)谝粡垐D片1滾動(dòng)出邊框時(shí)，后面的圖片1則出現(xiàn)在圖片4的后面，這樣效果看起來(lái)就和循環(huán)一樣~

　　當(dāng)圖片滾動(dòng)到下面的這種情況時(shí)：

　　繼續(xù)滾動(dòng)就會(huì)導(dǎo)致圖片后面出現(xiàn)空白，就不是循環(huán)滾動(dòng)的效果了，其實(shí)這點(diǎn)也是程序的關(guān)鍵所在，每當(dāng)圖片滾動(dòng)到圖（2）這種情況時(shí)，就應(yīng)該讓圖片重新回到圖（1）那種狀態(tài)再繼續(xù)滾動(dòng)，這樣的話就形成了無(wú)縫循環(huán)滾動(dòng)的效果。

　　另外拓展一下程序?qū)懥耸髽?biāo)移入圖片停止?jié)L動(dòng)，移出繼續(xù)滾動(dòng)的效果，就是利用消除定時(shí)器的方法實(shí)現(xiàn)的，代碼很簡(jiǎn)單就不介紹了。還有我為了樣式好看一點(diǎn)，把圖片都設(shè)置為160*120的尺寸使用的，大家運(yùn)行代碼是需要自己準(zhǔn)備圖片。

代碼如下：

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

*{

margin: 0;

padding: 0;

}

#div1{

width: 640px;

height: 120px;

margin: 100px auto;

background-color: #646464;

position: relative;

overflow: hidden;

}

#div1 ul{

position:absolute;

left:0;

top:0;

overflow: hidden;

background-color: #3b7796;

}

#div1 ul li{

float: left;

width: 160px;

height: 120px;

list-style: none;

}

</style>

<script>

window.onload = function(){

var oDiv = document.getElementById('div1');

var oUl = document.getElementById('ul1');

var speed = 2;//初始化速度

oUl.innerHTML += oUl.innerHTML;//圖片內(nèi)容*2-----參考圖（2）

var oLi= document.getElementsByTagName('li');

oUl.style.width = oLi.length*160+'px';//設(shè)置ul的寬度使圖片可以放下

var oBtn1 = document.getElementById('btn1');

var oBtn2 = document.getElementById('btn2');

function move(){

if(oUl.offsetLeft<-(oUl.offsetWidth/2)){//向左滾動(dòng)，當(dāng)靠左的圖4移出邊框時(shí)

oUl.style.left = 0;

}

if(oUl.offsetLeft > 0){//向右滾動(dòng)，當(dāng)靠右的圖1移出邊框時(shí)

oUl.style.left = -(oUl.offsetWidth/2)+'px';

}

oUl.style.left = oUl.offsetLeft + speed + 'px';

}

oBtn1.addEventListener('click',function(){

speed = -2;

},false);

oBtn2.addEventListener('click',function(){

speed = 2;

},false);

var timer = setInterval(move,30);//全局變量，保存返回的定時(shí)器

oDiv.addEventListener('mouseout', function () {

timer = setInterval(move,30);

},false);

oDiv.addEventListener('mousemove', function () {

clearInterval(timer);//鼠標(biāo)移入清除定時(shí)器

},false);

}

</script>

</head>

<body>

<input id="btn1" type="button" value="向左">

<input id="btn2" type="button" value="向右">

<div id="div1">

<ul id="ul1">

<li><img src="img/img_1.jpg"></li>

<li><img src="img/img_2.jpg"></li>

<li><img src="img/img_3.jpg"></li>

<li><img src="img/img_4.jpg"></li>

</ul>

</div>

</body>

</html>

以上就是js實(shí)現(xiàn)無(wú)縫滾動(dòng)特效的詳細(xì)代碼，希望對(duì)大家的學(xué)習(xí)有所幫助。

如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣魃鐓^(qū)，廣大熱心網(wǎng)友會(huì)為你解答??！點(diǎn)擊進(jìn)入社區(qū)

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：低調(diào)渲染lh1sll > 《Javascript》

舉報(bào)/認(rèn)領(lǐng)