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

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;
                }
            }
        }
    }
相关推荐
赵润凤7 分钟前
Vue 高级视频播放器实现指南
前端
FogLetter21 分钟前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
轻语呢喃23 分钟前
js事件机制:监听、捕获、冒泡与委托
javascript
小公主34 分钟前
如何利用闭包封装私有变量?掌握防抖、节流与 this 问题的巧妙解决方案
前端
烛阴37 分钟前
JavaScript 的动态魔法:使用 constructor 动态创建函数
前端·javascript
前端 贾公子1 小时前
tailwind ( uni ) === 自定义主题
前端
独立开阀者_FwtCoder1 小时前
大制作!在线 CSS 动效 编辑神器!太炫酷了!
前端·javascript·github
白白李媛媛1 小时前
vue3中实现echarts打印功能
前端·vue.js·echarts
一只卡比兽1 小时前
全栈Node.js开发:集成第三方AI提供商Token的完整指南
javascript
尘心cx1 小时前
前端-HTML-day2
前端·html