vue3实现图片滚动播放
<template>
<div class="swiperBox">
<div id="swiper">
<div class="imgBox" @mouseenter="mouseenter" @mouseleave="mouseleave">
<a v-for="(x, i) in LinkList" :key="i" class="a-link imgDiv" :href="x.Link" target="_blank">
<Image class="relative" :src="x.BgImg" width="200px" height="80px" :preview="false" />
<span class="text-position">{{ x.Text }}</span>
</a>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { Image } from '/@mid/components/Image';
let LinkList = [
]; // 存放图片数组
{
Text: '图1',
Link: '', // 图片链接
BgImg: '/images/bg/1.png', // 图片地址
},
{
Text: '图2',
Link: '', // 图片链接
BgImg: '/images/bg/1.png', // 图片地址
},
let timer = ref<number | any>(0);
let imgWidth = ref<number>(260);
let theSpeed = ref<number>(2);
let imgBox = ref<Element | null>(null);
onMounted(() => {
imgBox.value = document.getElementsByClassName('imgBox')[0];
//将imgBox下的图片进行拼接 循环展示图片
if (imgBox.value) imgBox.value.innerHTML += imgBox.value?.innerHTML;
let imgDiv = document.getElementsByClassName('imgDiv');
//设置div的宽度使图片可以放下
if (imgBox.value) {
imgBox.value.style.width = imgDiv.length * imgWidth.value + 'px';
timer.value = setInterval(autoScroll, 40); //全局变量 ，保存返回的定时器
}
});
// 图片滚动设置
function autoScroll() {
if (imgBox.value.offsetLeft < -(imgBox.value.offsetWidth / 2)) {
//提前更新left值，实现循环展示
imgBox.value.style.left = 0;
}
if (imgBox.value.offsetLeft > 0) {
//向右滚动 提前更新left值，实现循环展示
imgBox.value.style.left = -(imgBox.value.offsetWidth / 2) + 'px';
}
//向左滚动
theSpeed.value = -Math.abs(theSpeed.value);
// 向右滚动
// theSpeed.value = Math.abs(theSpeed.value);
// 求出总的left值，等于left值加上移动的速度（px值）
imgBox.value.style.left = imgBox.value.offsetLeft + theSpeed.value + 'px';
}
onBeforeUnmount(() => {
clearInterval(timer.value);
timer.value = 0;
});
// // 鼠标移入时停止滚动
function mouseenter() {
clearInterval(timer.value);
}
// 鼠标移开继续滚动
function mouseleave() {
timer.value = setInterval(autoScroll, 40);
}
</script>
<style scoped lang="less">
.swiperBox {
height: 100%;
width: 100%;
position: relative;
#swiper {
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
.imgBox {
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
display: flex;
.imgDiv {
width: 200px;
position: relative;
margin-right: 10px;
.text-position {
position: absolute;
top: 26%;
left: 11%;
font-size: 20px;
font-weight: bold;
color: #fff;
background-image: -webkit-linear-gradient(bottom, #c2c2c2, #ffffff, #b6b6b6);
-webkit-background-clip: text;
-webkit-text-fill-color: #ffffff5c;
}
}
}
}
}
</style>
