轮播图

 

 大概效果就是这样 每隔一段时间便更换一张图片

<template>
  <div class="home">
    <div class="img-wrapper">
      <transition-group :name="animation">
        <div v-for="(item, index) in list" :key="index"
            v-show="index === currentIndex">
          <img :src="item.url"
              @click="setCurrent(index)"
              style="width: 100%;max-height:200px;"/>
        </div>
      </transition-group>
    </div>
    <div class="wrapper">
      <div :class="{'on': currentIndex === index }"
          v-for="(item, index) in list" :key="index"
          @click="setCurrent(index)"><!--v-bind动态绑定类名，如果相等，则这个on类名存在-->
      </div>
    </div>
  </div>
</template>


<script>
// @ is an alias to /src



export default {
  name: 'Home',
  components: {
  },
  data() {
    return {
      animation: 'list1',
      list: [
        {
          id: 1,
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589821606002&di=ff748e6e7e774ba63ebf01e44a7c60ed&imgtype=0&src=http%3A%2F%2Fcdn.qiancipai.com%2F190305170514872174.jpg',
        },
        {
          id: 2,
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589821606002&di=b7318b20c6bc938f9f686989bdfff446&imgtype=0&src=http%3A%2F%2Ffile.youboy.com%2Fa%2F105%2F81%2F6%2F2%2F11099982s.jpg',
        },
        {
          id: 3,
          url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2186080368,3144660073&fm=15&gp=0.jpg',
        },
        {
          id: 4,
          url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=911607183,504846458&fm=15&gp=0.jpg',
        },
        {
          id: 5,
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589821708519&di=fe7bdae787c83305c75688ff39776bbd&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2Ff47d9b1af8b8c790a6a1ebdde3f0c0943d726869.jpg',
        }
      ],
      currentIndex: 0,
      timer1: null,
      timer2: null,
    }
  },
  mounted() {
    this.setTimer1();
  },
  methods: {



    /**
     * @desc 设置当前选中项
     */
    setCurrent(index) {
    if(index > this.currentIndex) {
      this.animation = 'list0'//如果点击的大于当前序号，则往左翻
    } else {
      this.animation = 'list1'
    }
      this.currentIndex = index
      
      this.clearTimer1() // 清除定时器，
      this.clearTimer2()// 清除定时器 避免没点击一次就开始下面这行代码就被触发一次，造成多次设置无限循环定时器的启动
      this.timer2 = setTimeout(() => { 
         // 过10秒后又开始设置无限循环定时器
        this.setTimer1()
      }, 1000 * 10)
    },



    /**
     * @desc - 清除无限循环定时器
     */
    clearTimer1() {
      clearInterval(this.timer1)
    },



    /**
     * @desc - 清除无限循环定时器
     */
    clearTimer2() {
      clearTimeout(this.timer2)
    },



    /**
     * @desc - 设置无限循环定时器
     */
    setTimer1(t = 5) {
      this.timer1 = setInterval(() => {
        if (this.currentIndex === this.list.length - 1) {
          this.animation = 'list1'
      
          this.currentIndex = 0
        } else {
          this.animation = 'list0'
          this.currentIndex++
        }
      }, 1000 * t)
    }
  },



  /**
   * @desc - 页面销毁之前清除定时器
   */
  beforeDestroy() {
    clearInterval(this.timer1)
    clearTimeout(this.timer2)
  }
}
</script>
<style>
/* 往左动画 */
.list0-enter-active, .list0-leave-active {
  transition: all 0.25s ease 0s;
}
.list0-enter {
  opacity: 0;
  transform: translateX(100%);
}
.list0-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}



/* 往右动画 */
.list1-enter-active, .list1-leave-active {
  transition: all 0.25s ease 0s;
}
.list1-enter {
  opacity: 0;
  transform: translateX(-100%);
}
.list1-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
</style>
<style lang="scss" scoped>
.home {
  position: relative;
  width: 375px;
  height: 200px;



  .img-wrapper {
    position: relative;
    img {
      position: absolute;
    }
  }



  .wrapper {
    position: absolute;
    bottom: 10px;
    right: 0;
    display: flex;
    div {
      width: 15px;
      height: 15px;
      margin: 10px;
      border-radius: 50%;
      background: aquamarine;
    }
    div.on {
      background: red;
    }
  }
}



</style>