vue实现循环滚动图片

网友投稿 • 2022年10月10日 am11:04 • 云知识 • 阅读 0

　　运用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>
　　.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 },

原创文章，作者：网友投稿，如若转载，请注明出处：https://www.cloudads.cn/archives/4107.html

vue实现循环滚动图片

相关推荐

发表评论