您好,登錄后才能下訂單哦!
這篇文章主要講解了javascript單張多張圖無縫滾動的實現(xiàn)方法,內(nèi)容清晰明了,對此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會有幫助。
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ù)和每個圖片的寬度計算,保證總寬度是可調(diào)整的 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="miaoflash/images/1.jpg"></li> <li><img src="miaoflash/images/2.jpg"></li> <li><img src="miaoflash/images/3.jpg"></li> <li><img src="miaoflash/images/4.jpg"></li> <li><img src="miaoflash/images/5.jpg"></li> <div ></div> </ul> </div> </body> </html>
內(nèi)容補充:
背景:
想要實現(xiàn)圖片持續(xù)滾動,既然使用js,就千萬不要加css動畫、過渡等相關(guān)樣式,如果想要滾動的平滑一下,可以一像素一像素的感動,則很平滑,如果加了過渡動畫,當圖片重置為0時,會有往回倒的動畫效果,跟預(yù)期不符。
原理:
圖片滾動原理同圖片輪播原理,同樣也適用于文字滾動等一系列滾動,通過復(fù)制最后一張圖片或最后一堆文字插入第一行,或復(fù)制第一張圖片或一堆文字插入在結(jié)尾,來實現(xiàn)無縫拼接,前提:1、必須是沒有設(shè)置過渡動畫的,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值超出元素的高度,則置為0 if(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值超出元素的高度,則置為0 if(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超出元素的高度,則置為0 if(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超出元素的高度,則置為0 if(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超出元素的高度,則置為0 if(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) } }
看完上述內(nèi)容,是不是對javascript單張多張圖無縫滾動的實現(xiàn)方法有進一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。