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

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;
                }
            }
        }
    }
相关推荐
写不出来就跑路17 小时前
基于 HTML+CSS+JavaScript 的薪资实时计算器(含本地存储和炫酷动画)
javascript·css·html
摘星编程17 小时前
Cursor Pair Programming:在前端项目里用 AI 快速迭代 UI 组件
前端·人工智能·ui·typescript·前端开发·cursorai
醉方休18 小时前
React Fiber 风格任务调度库
前端·javascript·react.js
北辰alk18 小时前
React Intl 全方位解析:为你的 React 应用注入国际化灵魂
前端
李白白i单身版18 小时前
前端VUE项目实现静默打印,无需用户手动确认
前端
bysking18 小时前
【29 - git bisect】git bisect 命令进行二分定位,排查异常commit bysking
前端
华仔啊18 小时前
摸鱼神器!前端大佬私藏的 11 个 JS 神级 API,复制粘贴就能用,效率翻倍
前端·javascript
一枚前端小能手18 小时前
🔥 React Hooks又让我重新渲染了999次!这些坑你踩过几个?
前端
念念不忘 必有回响18 小时前
js设计模式-状态模式
javascript·设计模式·状态模式
我的写法有点潮18 小时前
Scss 的四种导入方式你都知道吗
前端·css