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 },
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。