javascript單張多張圖無縫滾動實例代碼
我們會看到很多的網站上會使用多張圖片無縫滾動的效果。
下面我就介紹幾種純JS實現多張圖片的無縫滾動，并實現鼠標移到圖片上運動停止的效果，可以控制圖片左右滾動。
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;//定義圖片可以循環播放oUl.style.width=aLi.length*aLi[0].offsetWidth+’px’;//定義外層ul的寬度，根據圖片的個數和每個圖片的寬度計算，保證總寬度是可調整的function fnMove(){if(oUl.offsetLeft<-oUl.offsetWidth/2){oUl.style.left=0;}else if(oUl.offsetLeft>0){oUl.style.left=-oUl.offsetWidth/2+’px’;}//定義到邊界的時候，實現無縫銜接oUl.style.left=oUl.offsetLeft+iSpeed+’px’;//定義圖片的右邊距隨著速度不斷不斷增加，或減小，實現運動的效果}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://www.hdgsjgj.cn/bcjs/miaoflash/images/1.jpg'></li><li><img src='http://www.hdgsjgj.cn/bcjs/miaoflash/images/2.jpg'></li><li><img src='http://www.hdgsjgj.cn/bcjs/miaoflash/images/3.jpg'></li><li><img src='http://www.hdgsjgj.cn/bcjs/miaoflash/images/4.jpg'></li><li><img src='http://www.hdgsjgj.cn/bcjs/miaoflash/images/5.jpg'></li><div style='clear: none;'></div></ul></div></body></html>
內容補充：
背景：
想要實現圖片持續滾動，既然使用js,就千萬不要加css動畫、過渡等相關樣式，如果想要滾動的平滑一下，可以一像素一像素的感動，則很平滑，如果加了過渡動畫，當圖片重置為0時，會有往回倒的動畫效果，跟預期不符。
原理：
圖片滾動原理同圖片輪播原理，同樣也適用于文字滾動等一系列滾動，通過復制最后一張圖片或最后一堆文字插入第一行，或復制第一張圖片或一堆文字插入在結尾，來實現無縫拼接，前提：1、必須是沒有設置過渡動畫的，2、重置為0的時候與當前已經滾動到的高度對于圖片的位置而言肉眼看上去沒變化。
實現：
html主要包含三塊：
1、最外層盒子，用來展示滾動圖的區域，overflow:hidden;
2、滾動的盒子，主要改變該盒子的定位值，來實現滾動，里面包含所有要滾動的圖片或文字
3、包含圖片或文字的盒子。
代碼：
class Roll { constructor(opts) { this.elem = opts.elem; // 圖片包含滾動長度的元素的 this.elemBox = opts.elemBox; //圖片展示區域元素，為了獲取展示區域的高度 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單張多張圖無縫滾動實例代碼的詳細內容，更多關于javascript圖片無縫滾動的資料請關注好吧啦網其它相關文章！
相關文章：
1. vue實現web在線聊天功能2. JavaScript實現頁面動態驗證碼的實現示例3. JavaEE SpringMyBatis是什么? 它和Hibernate的區別及如何配置MyBatis4. Springboot 全局日期格式化處理的實現5. SpringBoot+TestNG單元測試的實現6. 完美解決vue 中多個echarts圖表自適應的問題7. 解決Android Studio 格式化 Format代碼快捷鍵問題8. 在Chrome DevTools中調試JavaScript的實現9. Python使用urlretrieve實現直接遠程下載圖片的示例代碼10. Java使用Tesseract-Ocr識別數字
網公網安備