javascript單張多張圖無縫滾動實例代碼
我們會看到很多的網(wǎng)站上會使用多張圖片無縫滾動的效果。
下面我就介紹幾種純JS實現(xiàn)多張圖片的無縫滾動，并實現(xiàn)鼠標移到圖片上運動停止的效果，可以控制圖片左右滾動。
1.效果展示：
<!DOCTYPE html><html><head><title>無縫滾動</title></head><style type='text/css'>*{margin: 0;padding: 0;}#div1{position: relative;border:1px solid #0ff;width:1100px; height: 180px;margin:50px auto 0;overflow: hidden;}#div1 ul{position: absolute;left: 0;}#div1 ul li{list-style: none;width:200px;float: left;padding: 10px;height: 160px;}#div1 ul li img{width:100%;}</style><script type='text/javascript'>window.onload=function(){var oDiv=document.getElementById(’div1’);var oUl=oDiv.getElementsByTagName(’ul’)[0];var aLi=oUl.getElementsByTagName(’li’);var aA=document.getElementsByTagName(’a’);//獲取向右向左的箭頭var timer=null;var iSpeed=10;oUl.innerHTML+=oUl.innerHTML;//定義圖片可以循環(huán)播放oUl.style.width=aLi.length*aLi[0].offsetWidth+’px’;//定義外層ul的寬度，根據(jù)圖片的個數(shù)和每個圖片的寬度計算，保證總寬度是可調整的function fnMove(){if(oUl.offsetLeft<-oUl.offsetWidth/2){oUl.style.left=0;}else if(oUl.offsetLeft>0){oUl.style.left=-oUl.offsetWidth/2+’px’;}//定義到邊界的時候，實現(xiàn)無縫銜接oUl.style.left=oUl.offsetLeft+iSpeed+’px’;//定義圖片的右邊距隨著速度不斷不斷增加，或減小，實現(xiàn)運動的效果}timer=setInterval(fnMove,30);aA[0].onclick=function(){iSpeed=-10;//按下左箭頭，定義向左運動}aA[1].onclick=function(){iSpeed=10;//按下右箭頭，定義向右運動}oDiv.onmouseover=function(){clearInterval(timer);//鼠標移動到圖片上，清除定時器，停止運動}oDiv.onmouseout=function(){timer=setInterval(fnMove,30);//鼠標移出，重新開啟定時器，重新運動}};</script><body><a href='javascript:;' rel='external nofollow' rel='external nofollow' >←</a><a href='javascript:;' rel='external nofollow' rel='external nofollow' >→</a><div id='div1'><ul><li><img src='http://m.b3g6.com/bcjs/miaoflash/images/1.jpg'></li><li><img src='http://m.b3g6.com/bcjs/miaoflash/images/2.jpg'></li><li><img src='http://m.b3g6.com/bcjs/miaoflash/images/3.jpg'></li><li><img src='http://m.b3g6.com/bcjs/miaoflash/images/4.jpg'></li><li><img src='http://m.b3g6.com/bcjs/miaoflash/images/5.jpg'></li><div style='clear: none;'></div></ul></div></body></html>
內(nèi)容補充：
背景：
想要實現(xiàn)圖片持續(xù)滾動，既然使用js,就千萬不要加css動畫、過渡等相關樣式，如果想要滾動的平滑一下，可以一像素一像素的感動，則很平滑，如果加了過渡動畫，當圖片重置為0時，會有往回倒的動畫效果，跟預期不符。
原理：
圖片滾動原理同圖片輪播原理，同樣也適用于文字滾動等一系列滾動，通過復制最后一張圖片或最后一堆文字插入第一行，或復制第一張圖片或一堆文字插入在結尾，來實現(xiàn)無縫拼接，前提：1、必須是沒有設置過渡動畫的，2、重置為0的時候與當前已經(jīng)滾動到的高度對于圖片的位置而言肉眼看上去沒變化。
實現(xiàn)：
html主要包含三塊：
1、最外層盒子，用來展示滾動圖的區(qū)域，overflow:hidden;
2、滾動的盒子，主要改變該盒子的定位值，來實現(xiàn)滾動，里面包含所有要滾動的圖片或文字
3、包含圖片或文字的盒子。
代碼：
class Roll { constructor(opts) { this.elem = opts.elem; // 圖片包含滾動長度的元素的 this.elemBox = opts.elemBox; //圖片展示區(qū)域元素，為了獲取展示區(qū)域的高度 this.direction = opts.direction; this.time = opts.time; this.init(); this.roll = this.roll.bind(this) this.startRoll = this.startRoll.bind(this) this.stopRoll = this.stopRoll.bind(this) } init(){ this.elemHeight = this.elem.offsetHeight; this.elemHtml = this.elem.innerHTML; this.elem.innerHTML = this.elem.innerHTML + this.elemHtml+ this.elemHtml; this.speed; // 如果向上滾或者向左滾動每次減1，向下滾或者向右滾動每次加1 if(this.direction === ’top’ || this.direction === ’left’){ this.speed = -1; }else{ this.speed = 1; } } roll(){ switch (this.direction) { case 'top':// 如果滾動的盒子的top值超出元素的高度，則置為0if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){ this.elemBox.style.top = 0;}else{ this.elemBox.style.top = this.elemBox.offsetTop + this.speed + ’px’;}break; case 'bottom':// 如果滾動的盒子的bottom值超出元素的高度，則置為0if(Math.abs(this.elemBox.offsetBottom) >= this.elemHeight){ this.elemBox.style.bottom = 0;}else{ this.elemBox.style.bottom = this.elemBox.offsetBottom + this.speed + ’px’;}break; case 'left':// 如果滾動的盒子的left超出元素的高度，則置為0if(Math.abs(this.elemBox.offsetLeft) >= this.elemHeight){ this.elemBox.style.left = 0;}else{ this.elemBox.style.left = this.elemBox.offsetLeft + this.speed + ’px’;}break; case 'right':// 如果滾動的盒子的right超出元素的高度，則置為0if(Math.abs(this.elemBox.offsetRight) >= this.elemHeight){ this.elemBox.style.right = 0;}else{ this.elemBox.style.right = this.elemBox.offsetRight + this.speed + ’px’;}break; default:// 默認向上滾動，如果滾動的盒子的top超出元素的高度，則置為0if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){ this.elemBox.style.top = 0;}else{ this.elemBox.style.top = this.elemBox.offsetTop + speed + ’px’;} } } stopRoll(){ clearInterval(this.scrollTimer) } startRoll(){ this.scrollTimer = setInterval(this.roll,this.time) }}
以上就是javascript單張多張圖無縫滾動實例代碼的詳細內(nèi)容，更多關于javascript圖片無縫滾動的資料請關注好吧啦網(wǎng)其它相關文章！
相關文章：
1. Java commons-httpclient如果實現(xiàn)get及post請求2. 一文帶你徹底理解Java序列化和反序列化3. JS中6個對象數(shù)組去重的方法4. Python基于requests庫爬取網(wǎng)站信息5. vscode運行php報錯php?not?found解決辦法6. python中文本字符處理的簡單方法記錄7. PHP laravel實現(xiàn)導出PDF功能8. Python使用Selenium自動進行百度搜索的實現(xiàn)9. PHP利用curl發(fā)送HTTP請求的實例代碼10. 資深程序員：給Python軟件開發(fā)測試的25個忠告！
網(wǎng)公網(wǎng)安備