用在官网中的多张图片无限滚动播放的效果

BrowserPreview_tmp.gif

dom结构

要注意的是wrapper代表的展示部分，宽度1200px（根据设计来），inner是多张图片的实际宽度，图片要多来一份，因为图片是往左一直移动的。当第6张图片也移动出屏幕时后面要接上第一张图片，才能有无限循环的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="life-wrapper">
    <div class="life-wrapper-inner" ref="wrapperInner">
        <img src="@/assets/partnerHome/shenghuo1.png" class="shenghuo-item" alt="">
        <img src="@/assets/partnerHome/shenghuo2.png" class="shenghuo-item" alt="">
        <img src="@/assets/partnerHome/shenghuo3.png" class="shenghuo-item" alt="">
        <img src="@/assets/partnerHome/shenghuo4.png" class="shenghuo-item" alt="">
        <img src="@/assets/partnerHome/shenghuo5.png" class="shenghuo-item" alt="">
        <img src="@/assets/partnerHome/shenghuo6.png" class="shenghuo-item" alt="">
        重复了一遍
        <img src="@/assets/partnerHome/shenghuo1.png" class="shenghuo-item" alt="">
        <img src="@/assets/partnerHome/shenghuo2.png" class="shenghuo-item" alt="">
        <img src="@/assets/partnerHome/shenghuo3.png" class="shenghuo-item" alt="">
        <img src="@/assets/partnerHome/shenghuo4.png" class="shenghuo-item" alt="">
        <img src="@/assets/partnerHome/shenghuo5.png" class="shenghuo-item" alt="">
        <img src="@/assets/partnerHome/shenghuo6.png" class="shenghuo-item" alt="">
    </div>
</div>

css部分

wrapper要overflow: hidden;

1
2
3
4
5
6
7
8
9
10
11
12
.life-wrapper{
    width: 1200px;
    overflow: hidden;
    margin: 40px auto;
    .life-wrapper-inner{
        display: flex;
        .shenghuo-item {
            width: 291px;
            height: 350px;
        }
    }
}

js部分

无限滚动核心就是用了定时器，让图片15ms向左移动一像素（用translateX移动），图片看起来运动的就比较顺滑。当最后一张图片移出屏幕时，啪，让translateX置为0，这样可以实现无线滚动。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
export default {
    data() {
        return {
            count: 0,
            stopFlag: false,
            timer: null
        }
    },
    mounted() {
        this.$refs.wrapperInner.addEventListener('mouseenter', () => {
            this.stopFlag = true;
        });
        this.$refs.wrapperInner.addEventListener('mouseleave', () => {
            this.stopFlag = false;
        });
        let dom = this.$refs.wrapperInner.style
        this.timer = setInterval(() => {
            if (this.stopFlag){
                return
            }
            this.count++
            if (this.count >= 291 * 6) {
                this.count = 0
            }
            dom.transform = `translateX(-${this.count}px)`
        }, 15)
    },
    unmounted(){
        clearInterval(this.timer)
    }
}