vue实现循环滚动图片

本文实例为大家分享了vue实现循环滚动图片的具体代码，供大家参考，具体内容如下

 效果（循环滚动，可切换方向）：

轮播组件BaseSwiper.vue：

                                                                                                                    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  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;    }}.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;                }            }        }    }}

父组件调用，只贴出关键代码：

 //引用import Swiper from '../BaseSwiper/BaseSwiper' components: { Swiper },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。