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两个属性来规定渲染元素和动画的名称）
实践
- 搭建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里面放下面的按钮
- 利用
v-show显示图片（当index===currentPage的时候显示该张图片），并绑定click事件，来改变显示的图片
data () {
return {
currentPage: 0
}
}，
methods: {
changeSilder (index) {
this.currentPage = index
}
}
- 补充切换的动画
.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里面都有哦
