vue 轮播图实现

<template>
  <div>
    <div class="box">
      <div 
        v-for="item,index in list" 
        :key="index" 
        class="item" 
        :class="{
    
    
          'prev': index === 0, 
          'prev-to-right': index === 0 && action === 'toNext', 
          'current': index === 1,
          'current-to-right': index === 1 && action === 'toNext', 
          'current-to-left': index === 1 && action === 'toPrev',
          'next': index === 2,
          'next-to-left': index === 2 && action === 'toPrev'
        }"
      >
        {
    
    {
    
    item}}
      </div>
      <div class="prev-btn page-btn" @click="toPrevPage">prev</div>
      <div class="next-btn page-btn" @click="toNextPage">next</div>
    </div>
  </div>
</template>

<script>
  export default {
    
    
    data() {
    
    
      return {
    
    
        list: [1,2,3],
        action: '',
        running: false
      }
    },
    methods: {
    
    
      // 切换到上一个
      toPrevPage() {
    
    
        if (this.running) return
        this.running = true
        this.action = 'toPrev'
        let timer = setTimeout(() => {
    
    
          this.list.shift()
          this.list.push(Math.random() * 10)
          this.action = ''
          clearTimeout(timer)
          this.running = false
        }, 1000)
      },
      // 切换到下一个
      toNextPage() {
    
    
        if (this.running) return
        this.running = true
        this.action = 'toNext'
        let timer = setTimeout(() => {
    
    
          this.list.pop()
          this.list.unshift(Math.random() * 10)
          this.action = ''
          clearTimeout(timer)
          this.running = false
        }, 1000)
      }
    }
  }
</script>

<style scoped lang="scss">
  .box {
    
    
    width: 400px;
    height: 200px;
    overflow: hidden;
    position: relative;
    margin: 100px auto;
    .item {
    
    
      width: 100%;
      height: 100%;
      background-color: #ccc;
      text-align: center;
      line-height: 200px;
      position: absolute;
      top: 0;
      left: 0;
      &.prev {
    
    
        transform: translateX(-100%);
      }
      &.next {
    
    
        transform: translateX(100%);
      }
    }
    .prev-to-right {
    
    
      animation: prevFadeToRight 1s .2s ease both;
    }
    .current-to-right {
    
    
      animation: currentFadeToRight 1s .2s ease both;
    }
    .current-to-left {
    
    
      animation: currentFadeToLeft 1s .2s ease both;
    }
    .next-to-left {
    
    
      animation: nextFadeToLeft 1s .2s ease both;
    }

    @keyframes prevFadeToRight {
    
    
      0% {
    
     transform:translateX(-100%); }
      100% {
    
     transform:translateX(0%); }
    }
    @keyframes currentFadeToRight {
    
    
      0% {
    
     transform:translateX(0%); }
      100% {
    
     transform:translateX(100%); }
    }
    @keyframes currentFadeToLeft {
    
    
      0% {
    
     transform:translateX(0%); }
      100% {
    
     transform:translateX(-100%); }
    }
    @keyframes nextFadeToLeft {
    
    
      0% {
    
     transform:translateX(100%); }
      100% {
    
     transform:translateX(0%); }
    }

    .page-btn {
    
    
      position: absolute;
      top: 20%;
      transform: translateY(-50%);
      cursor: pointer;
      &.prev-btn {
    
    
        left: 20px;
      }
      &.next-btn {
    
    
        right: 20px;
      }
    }
  }
</style>