今天小編就為大家?guī)硪黄嘘P(guān)Javascript實現(xiàn)圖片無縫滾動效果的文章。小編覺得挺實用的,為此分享給大家做個參考。一起跟隨小編過來看看吧。
成都創(chuàng)新互聯(lián)一直通過網(wǎng)站建設(shè)和網(wǎng)站營銷幫助企業(yè)獲得更多客戶資源。 以"深度挖掘,量身打造,注重實效"的一站式服務(wù),以成都做網(wǎng)站、成都網(wǎng)站設(shè)計、成都外貿(mào)網(wǎng)站建設(shè)、移動互聯(lián)產(chǎn)品、成都全網(wǎng)營銷服務(wù)為核心業(yè)務(wù)。10多年網(wǎng)站制作的經(jīng)驗,使用新網(wǎng)站建設(shè)技術(shù),全新開發(fā)出的標(biāo)準(zhǔn)網(wǎng)站,不但價格便宜而且實用、靈活,特別適合中小公司網(wǎng)站制作。網(wǎng)站管理系統(tǒng)簡單易用,維護(hù)方便,您可以完全操作網(wǎng)站資料,是中小公司快速網(wǎng)站建設(shè)的選擇。
實現(xiàn)原理:
圖片滾動原理同圖片輪播原理,同樣也適用于文字滾動等一系列滾動,通過復(fù)制最后一張圖片或最后一堆文字插入第一行,或復(fù)制第一張圖片或一堆文字插入在結(jié)尾,來實現(xiàn)無縫拼接。
前提:1、必須是沒有設(shè)置過渡動畫的,2、重置為0的時候與當(dāng)前已經(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: // 默認(rèn)向上滾動,如果滾動的盒子的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)容,你們掌握J(rèn)avascript實現(xiàn)圖片無縫滾動效果的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
分享文章:Javascript實現(xiàn)圖片無縫滾動效果
標(biāo)題網(wǎng)址:http://muchs.cn/article10/pidpgo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營銷推廣、企業(yè)建站、建站公司、網(wǎng)站制作、網(wǎng)站收錄、網(wǎng)站設(shè)計
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)