vue实现多图循环轮播

定义轮播组件

<template>
    <div class="swiperBox">
        <div class="directionIcon">
            <div class="imgLeft" @click="clickLeft"></div>
            <div class="imgRight" @click="clickRight"></div>
        </div>
        <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/situationImg/banner1.jpg'),
                    require('../assets/situationImg/banner2.jpg'),
                    require('../assets/situationImg/banner3.jpg'),
                    require('../assets/situationImg/banner4.jpg'),
                    require('../assets/situationImg/banner5.jpg')
                ],
                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.innerHTML += imgBox.innerHTML;
            let imgDiv= document.getElementsByClassName('imgDiv');
            imgBox.style.width = imgDiv.length*this.imgWidth+'px';//设置ul的宽度使图片可以放下
            let that=this;
            function autoScroll() {
                if(imgBox.offsetLeft<-(imgBox.offsetWidth/2)){//向左滚动
                    imgBox.style.left = 0;
                }
                if(imgBox.offsetLeft > 0){//向右滚动
                    imgBox.style.left = -(imgBox.offsetWidth/2)+'px';
                }
                if (that.theDirection == 'left') {
                    that.theSpeed = -Math.abs(that.theSpeed)
                } else {
                    that.theSpeed = Math.abs(that.theSpeed)
                }
                imgBox.style.left = imgBox.offsetLeft + that.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;
        .directionIcon{
            position: absolute;
            top: 14%;
            width: 120%;
            left: -10%;
            display: flex;
            justify-content: space-between;
            opacity: 0.5;
            .imgLeft{
                left: 50px;
                width: 100px;
                height: 100px;
                background: url("../assets/situationImg/left.png") no-repeat;
                background-size: 80%;
            }
            .imgRight{
                left: 50px;
                width: 100px;
                height: 100px;
                background: url("../assets/situationImg/left.png") no-repeat;
                background-size: 80%;
                transform: rotateY(180deg);
            }
        }
        .directionIcon:hover{
            opacity: 1;
        }
        #swiper{
            width:100%;
            height:100%;
            overflow: hidden;
            position: relative;
            .imgBox{
                position:absolute;
                left:0;
                top:0;
                overflow: hidden;
                display: flex;
                .imgDiv{
                    width: 100%;
                    margin-left: 15px;
                    img{
                        height:100%;
                        width:100%;
                    }
                }
            }
        }
    }

</style>

调用轮播组件

import Swiper from '../components/Swiper'
<Swiper :speed="2" :direction="'left'"></Swiper>