vue的轮播图

image.png
先来展示一个简单的效果。好吧，从这里啥也看不出来，就是一张图上面有几个点而已。想看到demo还是移步这里吧点击
这仅仅是一个最简单的轮播图效果，如果用jq我想大家是驾轻就熟，用vue该怎么实现呢（悄悄告诉你们比jq简单多了）？

分析步骤

• 首先我们把html框子搭出来
• 然后控制图片的v-show决定显示的图片（这里可以在data里面定义一个currentPage来表示当前显示的轮播图的index，只要index === currentPage则v-show为true否则为false）
• 然后同样利用currentPage这个变量控制按钮的class表示高亮
• 绑定底部按钮的click事件，当点击的时候currentPage变成被点击的按钮的index值
• 最后把图片的外框元素用transition-group替换（这里不要忘记设置tag和name两个属性来规定渲染元素和动画的名称）

实践

1. 搭建html结构

<template lang='pug'>
.slider-wrap
  transition-group.slider(tag='ul' :name='vertical-image')
    li.item(v-for='(item, index) in imgList' :key='index' v-show='index === currentPage')
      img(:src='item.url')
  .dot
    span(v-for='(item, index) in imgList' :key='index' :class='{"active": index ===currentPage}' @click='changeSilder(index)')
</template>

解析：slider-wrap 为整个焦点图的外框，上面绑定两个事件mouseenter和mouseleave，目的是为了划过焦点图的时候停止动画；slider是轮播的图片的外框；循环imgs，生成li，并定义v-show决定显示的图片；dot里面放下面的按钮

2. 利用v-show显示图片（当index===currentPage的时候显示该张图片），并绑定click事件，来改变显示的图片

data () {
    return {
      currentPage: 0
    }
}，
methods: {
  changeSilder (index) {
      this.currentPage = index
  }
}

3. 补充切换的动画

.vertical-image-enter-active {
    transform: translateX(0);
    transition: all 1s ease;
}
.vertical-image-leave-active {
    transform: translateX(-100%);
    transition: all 1s ease;
}
.vertical-image-enter {
    transform: translateX(100%);
}
.vertical-image-leave {
    transform: translateX(0);
}

备注：可以利用setTimeout让焦点图自动轮播，并在划过的时候停止，如果需要看到具体的实现demo里面都有哦