使用vue的v-show和transition制作一个简单轮播图

<template>  <!--轮播图-->  <div class="carousel-wrap" id="carousel">    <transition-group tag="ul" class=‘slide-ul‘ :name="transitionName">      <li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">        <a :href="list.clickUrl" rel="nofollow">          <img :src="list.image" :alt="list.desc">        </a>      </li>    </transition-group>    <div class="carousel-items">      <span v-for="(item,index) in slideList.length" :class="{‘active‘:index===currentIndex}" @click="change(index)"></span>    </div>  </div></template>

<script>  export default{    data () {      return{        slideList: [          {            "clickUrl": "#",            "desc": "nhwc",            "image": ""          },          {            "clickUrl": "#",            "desc": "hxrj",            "image": ""          },          {            "clickUrl": "#",            "desc": "rsdh",            "image": ""          }        ],        currentIndex: 0,        timer: ‘‘,        transitionName: ‘list‘      }    },    mounted () {      this.$nextTick(() => {        this.timer = setInterval(() => {          this.autoPlay()        },3000)      })    },    methods: {      go() {        this.timer = setInterval(() => {          this.autoPlay()        },3000)      },      stop() {        clearInterval(this.timer)        this.timer = null      },      change(index) {        this.stop()        this.go()        if (this.currentIndex > index) {          this.transitionName = ‘back‘        }else if (this.currentIndex < index) {          this.transitionName = ‘list‘        }        this.currentIndex = index      },      autoPlay() {        this.currentIndex++        this.transitionName = ‘list‘        if (this.currentIndex > this.slideList.length - 1) {          this.currentIndex = 0        }      }    }  }</script>

<style>  .carousel-wrap {    position: relative;    height: 453px;    width: 100%;    overflow: hidden;    background-color: #fff;  }  .slide-ul {    width: 100%;    height: 100%;  }  .slide-ul li {    position: absolute;    width: 100%;    height: 100%;    overflow: hidden;}  .slide-ul img {    width: 100%;    height: 100%;  }  .carousel-items {    position: absolute;    z-index: 10;    top: 380px;    width: 100%;    margin: 0 auto;    text-align: center;    font-size: 0;}  .carousel-items span {    display: inline-block;    height: 6px;    width: 30px;    margin: 0 3px;    background-color: #b2b2b2;    cursor: pointer;  }  .carousel-items .active {    background-color: #00bbdd;  }  /*动画效果向左进入，向左离开 100至0,0至-100*/  .list-enter-active {    transition: all 1s ease;    transform: translateX(0)  }  .list-leave-active {    transition: all 1s ease;    transform: translateX(-100%)  }  .list-enter {    transform: translateX(100%)  }  .list-leave {    transform: translateX(0)  }  /*动画效果向右进入，向左离开 -100至0,100至0*/  .back-enter-active {    transition: all 1s ease;    transform: translateX(0)  }  .back-leave-active {    transition: all 1s ease;    transform: translateX(100%)  }  .back-enter {    transform: translateX(-100%)  }  .back-leave {    transform: translateX(0%)  }</style>

原文地址：https://www.cnblogs.com/fairy62/p/9680749.html