2017-07-18 13:44:23 2244瀏覽
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
圖片無(wú)縫滾動(dòng)就是圖片一直不停的滾動(dòng)，好像沒(méi)有無(wú)窮無(wú)盡似的，實(shí)際上就是幾張圖片不停的循環(huán)，但是看不出有從最后面切換到最前面的效果，這就是無(wú)縫滾動(dòng)，文字和圖片都可以無(wú)縫滾動(dòng)，這里介紹的是圖片，文字是同樣的原理。
原理
以向上無(wú)縫滾動(dòng)為例，其余幾個(gè)方向的無(wú)縫滾動(dòng)原理是一樣的，點(diǎn)擊向上無(wú)縫滾動(dòng)。
設(shè)定一個(gè)可視區(qū)域，超過(guò)可視區(qū)域的部分隱藏，這里是將nav部分作為可視區(qū)域，ul#img是中包含所有的圖片，實(shí)現(xiàn)無(wú)縫滾動(dòng)的關(guān)鍵地方在這：
這里的nav.scrollTop是指當(dāng)前的可視對(duì)象nav的頂端與正在顯示的對(duì)象ul#img的頂端的距離，通俗一點(diǎn)來(lái)說(shuō)，就是滾動(dòng)條向下滾動(dòng)的距離；list[i]就是要顯示的圖片列表，list[list.length-1]是指最后一張圖片，list[list.length-1].offsetTop是指最后一張圖片的頂部到它的父元素的頂部的距離，這個(gè)距離是不變固定的，父元素的position必須不能是static（默認(rèn)的），而且也不能是div，否則會(huì)跳過(guò)這個(gè)元素把上一級(jí)當(dāng)成父元素。
當(dāng)向下滾動(dòng)的距離與list[list.length-1].offsetTop的距離相等時(shí)，即圖片5已經(jīng)劃過(guò)，到了顯示圖片1的時(shí)候，讓滾動(dòng)的距離瞬間為0，進(jìn)行切換時(shí)由于兩張圖片是一樣的，人觀看時(shí)察覺(jué)不到，故形成了無(wú)縫滾動(dòng)。
可以發(fā)現(xiàn)這里重疊了一張圖片，是因?yàn)楫?dāng)最后一張圖片滾動(dòng)完之后要形成循環(huán)，可視區(qū)域內(nèi)一定要有圖片否則一片空白，這里設(shè)定的可視區(qū)域就是一張圖片的高度，故重復(fù)的是圖片1，如果比一張圖片高度要大，則需按順序多重復(fù)幾張圖片列表的圖片。
html部分
四個(gè)方向：向上、向下、向左、向右的無(wú)縫滾動(dòng)的html部分是一樣的，就表現(xiàn)的部分是一樣的，即
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>無(wú)縫滾動(dòng)</title>
<linkrel="stylesheet"href="style.css">
</head>
<body>
<nav>
<ulid="img">
<li><imgsrc="../images/img1.jpg"alt="img1"></li>
<li><imgsrc="../images/img2.jpg"alt="img2"></li>
<li><imgsrc="../images/img3.jpg"alt="img3"></li>
<li><imgsrc="../images/img4.jpg"alt="img4"></li>
<li><imgsrc="../images/img5.jpg"alt="img5"></li>
<li><imgsrc="../images/img1.jpg"alt="img1"></li>
</ul>
</nav>
<scripttype="text/javascript"src="script.js"></script>
</body>
</html>
|
這里需要注意以下：設(shè)定的是5張720*405尺寸圖片的循環(huán)滾動(dòng)，但是要實(shí)現(xiàn)無(wú)縫滾動(dòng)需在后面重復(fù)的添加幾張圖片，具體幾張要根據(jù)可視區(qū)域是圖片高度（向上，向下滾動(dòng)）或?qū)挾龋ㄏ蜃?，向右滾動(dòng)）的幾倍來(lái)確定，我這里設(shè)置可視區(qū)域的寬度為405px，故只需要重復(fù)一張即可，若假設(shè)是500px，則需重復(fù)兩張，類似這樣計(jì)算。
css部分
這里以向上滾動(dòng)為例，其余四個(gè)方向的樣式是類似的，只有些許地方不一樣。這里需要注意幾點(diǎn)：
1、nav是可視區(qū)域，一定要設(shè)置寬高，而且overflow要設(shè)置為hidden，否則移動(dòng)不了；
2、ul#img的position要設(shè)置，否則默認(rèn)為static，會(huì)影響offsetTop屬性，因?yàn)楦冈氐膒osition不能為static，否則會(huì)跳過(guò)該元素往上一級(jí)尋找；
3、要設(shè)置ul#img里面的li元素，否則圖片上下都會(huì)有2px的空白，影響滾動(dòng)時(shí)的效果。
向上、向下滾動(dòng)樣式
兩者樣式一樣。ul#img的高度要是所有圖片的總高度，但是由于li本來(lái)就是塊級(jí)元素是由上往下排列的，不設(shè)置ul#img的高度也可以，但是向左或向右移動(dòng)時(shí)，必須設(shè)置ul#img的寬度為所有圖片的總寬度，這里為保持一致就設(shè)置了高度為所有圖片的總高度；
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
*{
padding:0;
margin:0;
}
nav {
width:720px;
height:405px;/*設(shè)置可見(jiàn)部分的高度*/
margin:40pxauto;
border:5pxsolid#eee;
overflow:hidden;
}
#img{
width:720px;
height:2430px;/*設(shè)置可見(jiàn)部分的高度*/
position:relative;/*默認(rèn)是static*/
}
#img li{
width:720px;
height:405px;/*不設(shè)置則上下都會(huì)有2px的空白*/
}
|
向上左、向右滾動(dòng)樣式
兩者樣式一樣。向左、向右滾動(dòng)時(shí)要用float：left讓li元素在一行并排顯示，而沒(méi)有用display：inline-block是因?yàn)閳D片這樣顯示會(huì)有空隙，是因?yàn)樾袃?nèi)元素產(chǎn)生的間隔，故用浮動(dòng)。這里必須要設(shè)置ul#img的寬度為圖片的總寬度。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
*{
padding:0;
margin:0;
}
nav {
width:720px;
height:405px;/*設(shè)置可見(jiàn)部分的高度*/
margin:40pxauto;
border:5pxsolid#eee;
overflow:hidden;
}
#img{
width:4320px;
height:405px;/*設(shè)置可見(jiàn)部分的高度*/
position:relative;/*默認(rèn)是static*/
}
#img li{
width:720px;
height:405px;
float:left;
}
|
JavaScript部分
這里以向上滾動(dòng)為例，JavaScript代碼很簡(jiǎn)單，往下的滾動(dòng)就是改變一下scrollTop就行，而左右方向就是將scrollTop變成scrollLeft，offsetTop換成offsetLeft就行。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
varnav=document.getElementsByTagName('nav')[0];
varlist=document.getElementById('img').getElementsByTagName('li');
functionscroll() {
if(nav.scrollTop==list[list.length-1].offsetTop){
nav.scrollTop=0;
}else{
nav.scrollTop++;
}
}
vartimer= setInterval(scroll,10);
nav.onmouseover=function(){
clearInterval(timer);
};
nav.onmouseout=function() {
timer=setInterval(scroll,10);//必須得對(duì)timer重新賦值
}
|
點(diǎn)擊向下無(wú)縫滾動(dòng)
點(diǎn)擊向左無(wú)縫滾動(dòng)
點(diǎn)擊向右無(wú)縫滾動(dòng)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
全國(guó)免費(fèi)咨詢熱線
郵箱：codingke@1000phone.com
官方群：148715490
返回頂部