javascript
JavaScript之图片的无缝滚动
圖片無縫滾動就是圖片一直不停的滾動，好像沒有無窮無盡似的，實際上就是幾張圖片不停的循環(huán)，但是看不出有從最后面切換到最前面的效果，這就是無縫滾動，文字和圖片都可以無縫滾動，這里介紹的是圖片，文字是同樣的原理。
原理
以向上無縫滾動為例，其余幾個方向的無縫滾動原理是一樣的，點擊向上無縫滾動。
設定一個可視區(qū)域，超過可視區(qū)域的部分隱藏，這里是將nav部分作為可視區(qū)域，ul#img是中包含所有的圖片，實現(xiàn)無縫滾動的關鍵地方在這：
if(nav.scrollTop==list[list.length-1].offsetTop){nav.scrollTop=0}else{nav.scrollTop++;} 這里的nav.scrollTop是指當前的可視對象nav的頂端與正在顯示的對象ul#img的頂端的距離，通俗一點來說，就是滾動條向下滾動的距離；list[i]就是要顯示的圖片列表，list[list.length-1]是指最后一張圖片，list[list.length-1].offsetTop是指最后一張圖片的頂部到它的父元素的頂部的距離，這個距離是不變固定的，父元素的position必須不能是static（默認的），而且也不能是div，否則會跳過這個元素把上一級當成父元素。
當向下滾動的距離與list[list.length-1].offsetTop的距離相等時，即圖片5已經(jīng)劃過，到了顯示圖片1的時候，讓滾動的距離瞬間為0，進行切換時由于兩張圖片是一樣的，人觀看時察覺不到，故形成了無縫滾動。
可以發(fā)現(xiàn)這里重疊了一張圖片，是因為當最后一張圖片滾動完之后要形成循環(huán)，可視區(qū)域內(nèi)一定要有圖片否則一片空白，這里設定的可視區(qū)域就是一張圖片的高度，故重復的是圖片1，如果比一張圖片高度要大，則需按順序多重復幾張圖片列表的圖片。
html部分
四個方向：向上、向下、向左、向右的無縫滾動的html部分是一樣的，就表現(xiàn)的部分是一樣的，即
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>無縫滾動</title><link rel="stylesheet" href="style.css"></head><body><nav><ul id="img"><li><img src="../images/img1.jpg" alt="img1"></li><li><img src="../images/img2.jpg" alt="img2"></li><li><img src="../images/img3.jpg" alt="img3"></li><li><img src="../images/img4.jpg" alt="img4"></li><li><img src="../images/img5.jpg" alt="img5"></li><li><img src="../images/img1.jpg" alt="img1"></li></ul></nav><script type="text/javascript" src="script.js"></script></body></html>這里需要注意以下：設定的是5張720*405尺寸圖片的循環(huán)滾動，但是要實現(xiàn)無縫滾動需在后面重復的添加幾張圖片，具體幾張要根據(jù)可視區(qū)域是圖片高度（向上，向下滾動）或?qū)挾?#xff08;向左，向右滾動）的幾倍來確定，我這里設置可視區(qū)域的寬度為405px，故只需要重復一張即可，若假設是500px，則需重復兩張，類似這樣計算。
css部分
這里以向上滾動為例，其余四個方向的樣式是類似的，只有些許地方不一樣。這里需要注意幾點：
1、nav是可視區(qū)域，一定要設置寬高，而且overflow要設置為hidden，否則移動不了；
2、ul#img的position要設置，否則默認為static，會影響offsetTop屬性，因為父元素的position不能為static，否則會跳過該元素往上一級尋找；
3、要設置ul#img里面的li元素，否則圖片上下都會有2px的空白，影響滾動時的效果。
向上、向下滾動樣式
兩者樣式一樣。ul#img的高度要是所有圖片的總高度，但是由于li本來就是塊級元素是由上往下排列的，不設置ul#img的高度也可以，但是向左或向右移動時，必須設置ul#img的寬度為所有圖片的總寬度，這里為保持一致就設置了高度為所有圖片的總高度；
*{padding: 0;margin: 0;}nav {width: 720px;height: 405px; /*設置可見部分的高度*/margin: 40px auto;border: 5px solid #eee;overflow: hidden;}#img{width: 720px;height:2430px;/*設置可見部分的高度*/position: relative;/*默認是static*/}#img li{width: 720px;height:405px;/*不設置則上下都會有2px的空白*/}向上左、向右滾動樣式
兩者樣式一樣。向左、向右滾動時要用float：left讓li元素在一行并排顯示，而沒有用display：inline-block是因為圖片這樣顯示會有空隙，是因為行內(nèi)元素產(chǎn)生的間隔，故用浮動。這里必須要設置ul#img的寬度為圖片的總寬度。
*{padding: 0;margin: 0;}nav {width: 720px;height: 405px; /*設置可見部分的高度*/margin: 40px auto;border: 5px solid #eee;overflow: hidden;}#img{width: 4320px;height:405px;/*設置可見部分的高度*/position: relative;/*默認是static*/}#img li{width: 720px;height:405px;float:left;}JavaScript部分
這里以向上滾動為例，JavaScript代碼很簡單，往下的滾動就是改變一下scrollTop就行，而左右方向就是將scrollTop變成scrollLeft，offsetTop換成offsetLeft就行。
var nav=document.getElementsByTagName('nav')[0];var list=document.getElementById('img').getElementsByTagName('li');function scroll() {if(nav.scrollTop==list[list.length-1].offsetTop){nav.scrollTop=0;}else{nav.scrollTop++;}}var timer= setInterval(scroll,10);nav.onmouseover=function(){clearInterval(timer);};nav.onmouseout=function () {timer=setInterval(scroll,10);//必須得對timer重新賦值}點擊向下無縫滾動
點擊向左無縫滾動
點擊向右無縫滾動
轉(zhuǎn)載于:https://www.cnblogs.com/aicanxxx/p/7125672.html
總結(jié)
以上是生活随笔為你收集整理的JavaScript之图片的无缝滚动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 线程如何同步和通讯
- 下一篇： 数据结构与算法JavaScript描述—