用VUE写简单的轮播图

1.代码

<tempalte>
     <div class="img-div">
           <transition name="slide">
                <ul v-if="isShow">
                    <li>
                        <img :src="items[2 * index ].url"  >
                    </li>
                    <li>
                        <img :src="items[2 * index  + 1].url"  >
                    </li>
                </ul>
            </transition>
            <transition name="slideLeave">
                <ul v-if="!isShow">
                    <li>
                        <img :src="items[2 * index ].url"  >
                    </li>
                    <li>
                        <img :src="items[2 * index + 1].url"  >
                    </li>
                </ul>
            </transition>
        </div>
</tempalte>
<script>
   export default {
     mounted (){
        this.isShow = true
        ++ this.index
        setInterval(()=>{
                this.isShow = false
                setTimeout(() => {
                    this.isShow = true
                    ++ this.index
                    if(this.index == 3){
                        this.index = 0
                    }
                }, 10)
                
            },2000)

    },
    data () {
        return {
            items:[
            {
                'url':require("../../assets/3.jpg"),
            },
            {
                'url':require("../../assets/4.jpg"),
            },
            {
                'url':require("../../assets/5.jpg"),
            },
            {
                'url':require("../../assets/6.jpg"),
            },
            {
                'url':require("../../assets/7.jpg"),
            },
            {
                'url':require("../../assets/8.jpg"),
            },
            ],
            isShow:false,
            index:0
        }
    },
}
<style>
 .slide-enter{
       transform:translateY(400px);
    }
   .slide-enter-active,.slideLeave-leave-active{
        transition: all 2s;
    }
    .slideLeave-leave-to{
        transform:translateY(-400px);
    }
</style>

2效果图
我做的是两张图片一起滚动的，也可以换成单张或任意多张

image.png