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

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;
                }
            }
        }
    }
相关推荐
web守墓人43 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架