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

标签：play   items   动画效果   rap   pos   href   osi   top   current   

<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>

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

标签：play   items   动画效果   rap   pos   href   osi   top   current   

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