vue—轮播效果

代码演示：

<div id="app">
  <div class="carousel" @mouseover='stop()' @mouseout='play()'>
    <transition-group tag="ul" class="slide" name="image">
      <!-- v-show="index==mark" 如果 当前这个元素的索引值 正好 等于 此刻mark变量里的值，我们让当前这个li元素显示 -->
      <li v-for="(item,index) in list" :key="index" v-show="index==mark"> <img :src="item" alt=""> </li>
    </transition-group>
    <div class="bullet"> <span v-for="(item,index) in list.length" :class="{active:index==mark}"
        @click="change(index)"></span> </div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.carousel {
  width: 500px;
  height: 300px;
  margin: 20px auto 0;
  position: relative;
  overflow: hidden;
}

.slide {
  width: 500px;
  height: 300px;
}

.slide li {
  position: absolute;
  left: 0;
  top: 0;
}

.slide li img {
  width: 500px;
  height: 300px;
}

.bullet {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 10px;
  text-align: center;
  z-index: 10;
}

.bullet span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  margin-right: 10px;
  cursor: pointer;
}

/* span标签，高亮显示的样式 */
.bullet span.active {
  background-color: orange;
  border: 1px solid yellow;
}

/* 进入过渡的过程中 */
.image-enter-active {
  /* 在进入的过渡的过程中，我--li 要 从 ul这个容器 中 发生 水平偏移 */
  transform: translateX(0);
  transition: all 1s ease;
}

/* 离开过渡的过程中*/
.image-leave-active {
  transform: translateX(-100%);
  transition: all 1s ease;
}

/* 刚进入过渡*/
.image-enter {
  /* 刚开始，我--li 在 ul这个容器里 */
  transform: translateX(100%);
}

/* 刚要离开过渡 */
.image-leave {
  /* 刚要离开的时候，我--li 在ul这个容器的 左上角那个点上 */
  transform: translateX(0)
}

JavaScript

let vm = new Vue({
  el: '#app',
  data: {
    timer: null,
    mark: 0,
    list: ['img/1.jpg', 'img/2.jpg', 'img/3.png', 'img/4.png', 'img/5.png', 'img/6.png', 'img/7.jpg', 'img/8.jpg']
  },
  // 生命周期钩子函数 
  created: function () {
    // 调用执行play方法 
    this.play();
  },
  methods: {
    change: function (index) {
      this.mark = index;
      console.log(this.mark);
    },
    autoPlay: function () {
      this.mark++;
      if (this.mark >= this.list.length) {
        this.mark = 0;
      }
    },
    play: function () {
      // 设置 定时器 
      this.timer = setInterval(this.autoPlay, 1000)
    },
    // 清除定时器
    stop: function () {
      clearInterval(this.timer)
    }
  }
})

大致思路：

1、用transition-group来包裹需要添加动画的标签，并用tag=“ul”,name=“image”
2、用v-for=“(item,index) in list” 将数据中心所有图片遍历出来 添加:key=“index”
v-show=“indexmark" 如果当前这个元素的索引值正好等于此刻mark变量里的值，我们让当前这个li元素显示
3、在动画组之外设置点，<span v-for=“(item,index) in list.length” :class="{active:indexmark}” @click=“change(index)”>
用v-for遍历数组长度的点，@click="change(index)"方法中心中让change函数让this.mark = index;，当点击白点时可以获得当前点的索引值，并为之添加active类名
4、为大盒子添加定时器：

@mouseover=‘stop()’ @mouseout='play()'调用与清除定时器