vue实现循环滚动图片
作者：suoh's Blog
这篇文章主要为大家详细介绍了vue实现循环滚动图片，多图片轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现循环滚动图片的具体代码，供大家参考，具体内容如下
效果（循环滚动，可切换方向）：
轮播组件BaseSwiper.vue：
<template>
<div class="swiperBox">
<img class="imgLeft" @click="clickLeft" src="../../../assets/img/左.png" alt="">
<img class="imgRight" @click="clickRight" src="../../../assets/img/右.png" alt="">
<div id="swiper">
<div class="imgBox">
<div class="imgDiv" v-for="(item,index) of imgList" :key="index">
<img :src="item" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'BaseSwiper',
props: {
speed: Number,
direction: String,
},
data() {
return {
imgList: [
require('../../../assets/img/组 14.png'),
require('../../../assets/img/组 15.png'),
require('../../../assets/img/组 17.png'),
require('../../../assets/img/组 18.png'),
require('../../../assets/img/组 24.png'),
],
timer: null,
theSpeed: this.speed,
imgWidth: 260,
theDirection: this.direction,
}
},
methods: {
clickLeft() {
this.theDirection = 'left';
},
clickRight() {
this.theDirection = 'right';
},
},
mounted() {
let imgBox = document.getElementsByClassName('imgBox')[0];
//将imgBox下的图片进行拼接 循环展示图片
imgBox.innerHTML += imgBox.innerHTML;
let imgDiv = document.getElementsByClassName('imgDiv');
imgBox.style.width = imgDiv.length * this.imgWidth + 'px';//设置div的宽度使图片可以放下
let self = this;
console.log(imgBox.offsetWidth,imgBox.style.width )
function autoScroll() {
if (imgBox.offsetLeft < -(imgBox.offsetWidth / 2)) {//提前更新left值，实现循环展示
imgBox.style.left = 0;
}
if (imgBox.offsetLeft > 0) {//向右滚动 提前更新left值，实现循环展示
imgBox.style.left = -(imgBox.offsetWidth / 2) + 'px';
}
if (self.theDirection == 'left') { //向左滚动,值为负
self.theSpeed = -Math.abs(self.theSpeed)
} else { //向右滚动
self.theSpeed = Math.abs(self.theSpeed)
}
// 求出总的left值，等于left值加上移动的速度（px值）
imgBox.style.left = imgBox.offsetLeft + self.theSpeed + 'px';
}
this.timer = setInterval(autoScroll, 30);//全局变量 ，保存返回的定时器
},
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
}
}
</script>
<style scoped lang='less'>
.swiperBox {
height: 100%;
width: 100%;
position: relative;
.imgLeft {
left: 0;
top: 40%;
}
.imgLeft,
.imgRight {
width: 27px;
height: 38px;
position: absolute;
cursor: pointer;
}
.imgRight {
right: 0;
top: 40%;
}
.directionIcon:hover {
opacity: 1;
}
#swiper {
width: 90%;
height: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
.imgBox {
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
display: flex;
.imgDiv {
width: 100%;
margin-left: 15px;
img {
height: 100%;
width: 280px;
// width: 260px;
// height: 120px;
}
}
}
}
}
</style>父组件调用，只贴出关键代码：
<Swiper :speed="2" :direction="'left'"></Swiper>
//引用
import Swiper from '../BaseSwiper/BaseSwiper'
components: { Swiper },以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。