无缝连接相片跑马灯，悬停和鼠标离开播放、监听该区域在可视区域才播放

左又2023-11-28 16:50

html：

html 复制代码

<template>
<div class="staff-content staff-marquee">
    <div class="box">
        <div class="staff-title">{{$t('staffPage.banner[0]')}}</div>
        <div class="staff-scorll" ref="wrapper">
            <div class="marquee-list" ref="marquee" @mouseover="mouseover" @mouseout="mouseout">
            <!-- 滚动内容 -->
                <div class="img-box" v-for="(item, index) in imgList" :key="index">
                    <img class="img" :src="item" />
                </div>
                <!-- 复制一份滚动内容，用于实现无缝对接-->
                <div class="img-box" v-for="(item, index) in imgList" :key="index + 100">
                    <img class="img" :src="item" />
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import { getAssetsFile } from '@/utils/utils';

export default {
    data() {
        return {
            getAssetsFile,
            imgList: [getAssetsFile('about/moudule1-0.png'), getAssetsFile('about/moudule1-1.png'), getAssetsFile('about/moudule1-2.png'),getAssetsFile('about/moudule1-3.png'), getAssetsFile('about/moudule1-4.png'), getAssetsFile('about/moudule1-5.png')],
            timer: null,
            box: "",
        };
    },
    mounted() {
        document.onscroll = () => {
            this.staffScroll(document.querySelectorAll('.staff-content'));
        };
    },
    methods: {
        init() {
            if (this.timer !== null) return;
            this.imgBox = this.$refs.wrapper;
            this.timer = setInterval(() => {
                this.move();
            }, 20);
        },
        // 跑马灯工作
        move() {
            let curLeft = this.imgBox.scrollLeft;
            //父盒子总宽度除以2 (24是盒子之间的右边距)
            let scrollWidth = this.$refs.marquee.scrollWidth / 2 + 24;
            this.imgBox.scrollLeft = curLeft + 1;
            if (curLeft > scrollWidth) {
                this.imgBox.scrollLeft = 0;
            }
        },
        //鼠标悬停
        mouseover() {
            clearInterval(this.timer);
            this.timer = null;
        },
        //鼠标离开，继续滚动
        mouseout() {
            this.init();
        },
        staffScroll(sections) {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // 滚动条偏移量
            sections.forEach((item, index) => {
                if (item.offsetTop - 100 <= scrollTop) {
                    if (index === 0) {
                        this.init();
                    } else {
                        this.mouseover();
                    }
                }
            });
        },
    },
    beforeDestroy() {
        clearInterval(this.timer);
        this.timer = null;
        document.onscroll = null;
    },
};
</script>

css：

css 复制代码

.staff-scorll {
        width: 100%;
        overflow: hidden;
        position: relative;
        margin-top: 30px;
        .marquee-list {
            display: flex;
            .img-box {
                margin-right: 24px;
                .img {
                    width: auto;
                    height: auto;
                }
            }
        }
    }