The effect used in the official website for multiple images to scroll indefinitely

Dom structure

Note that the wrapper represents the display section, 1200px wide (by design), inner is the actual width of multiple images, one more image is needed because the image is moving to the left. When the sixth image also moves off the screen, it must be followed by the first image to create an infinite loop effect.

<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="">"Repeated<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>
Copy the code

The CSS part

Wrapper to overflow: hidden;

.life-wrapper{
    width: 1200px;
    overflow: hidden;
    margin: 40px auto;
    .life-wrapper-inner{
        display: flex;
        .shenghuo-item {
            width: 291px;
            height: 350px; }}}Copy the code

Js part

The infinite scroll core uses a timer and moves the image one pixel to the left in 15ms (move it with translateX). The image looks smooth. When the last image moves off the screen, pop and leave translateX set to 0 for wireless scrolling.

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)
    }
}

Copy the code