今天小編就為大家?guī)硪黄嘘P(guān)Javascript實(shí)現(xiàn)圖片無縫滾動(dòng)效果的文章。小編覺得挺實(shí)用的，為此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：空間域名、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、松滋網(wǎng)站維護(hù)、網(wǎng)站推廣。

實(shí)現(xiàn)原理：

圖片滾動(dòng)原理同圖片輪播原理，同樣也適用于文字滾動(dòng)等一系列滾動(dòng)，通過復(fù)制最后一張圖片或最后一堆文字插入第一行，或復(fù)制第一張圖片或一堆文字插入在結(jié)尾，來實(shí)現(xiàn)無縫拼接。

前提：1、必須是沒有設(shè)置過渡動(dòng)畫的，2、重置為0的時(shí)候與當(dāng)前已經(jīng)滾動(dòng)到的高度對(duì)于圖片的位置而言肉眼看上去沒變化。

實(shí)現(xiàn)：

html主要包含三塊：

1、最外層盒子，用來展示滾動(dòng)圖的區(qū)域，overflow:hidden;

2、滾動(dòng)的盒子，主要改變該盒子的定位值，來實(shí)現(xiàn)滾動(dòng)，里面包含所有要滾動(dòng)的圖片或文字

3、包含圖片或文字的盒子。

具體代碼：

class Roll {
    constructor(opts) {
        this.elem = opts.elem; // 圖片包含滾動(dòng)長度的元素的
        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;
        // 如果向上滾或者向左滾動(dòng)每次減1，向下滾或者向右滾動(dòng)每次加1
        if(this.direction === 'top' || this.direction === 'left'){
            this.speed = -1;
        }else{
            this.speed = 1;
        }
    }
    roll(){
        switch (this.direction) {
            case "top":
                // 如果滾動(dòng)的盒子的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":
                // 如果滾動(dòng)的盒子的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":
                // 如果滾動(dòng)的盒子的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":
                // 如果滾動(dòng)的盒子的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)向上滾動(dòng)，如果滾動(dòng)的盒子的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實(shí)現(xiàn)圖片無縫滾動(dòng)效果的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章名稱：Javascript實(shí)現(xiàn)圖片無縫滾動(dòng)效果-創(chuàng)新互聯(lián)
文章起源：http://jinyejixie.com/article34/ddejpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站內(nèi)鏈、建站公司、小程序開發(fā)、虛擬主機(jī)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)