使用Vue制作幻灯片

一、数据准备

在页面中的幻灯片一般都会作为一个组件，由父组件将幻灯片组件需要的数据传入，数据slides如下：

slides: [{src: require('../assets/slideShow/pic1.jpg'),title: 'xxx1',href: 'detail/analysis'},{src: require('../assets/slideShow/pic2.jpg'),title: 'xxx2',href: 'detail/count'},{src: require('../assets/slideShow/pic3.jpg'),title: 'xxx3',href: 'http://xxx.xxx.com'},{src: require('../assets/slideShow/pic4.jpg'),title: 'xxx4',href: 'detail/forecast'}
],

二、幻灯片的点击切换功能

组件内部需要一个data，nowIndex为当前正在显示的幻灯片的index，也是slides数组的下标。

data() {return {nowIndex: 0}
}

页面的html为

<div class="slide-show"><div class="slide-img"><a :href="slide[nowIndex].href"><img :src="slides[nowIndex].src"></a></div><h2>{{slides[nowIndex].title}}</h2><ul class="slide-pages"><li @click="goto(pervIndex)">&lt;</li><li v-for="(item, index) in slides" @click="goto(index)"><a :class="{on: index === nowIndex}">{{index + 1}}</a></li><li @click="nextIndex">&gt;</li></ul>
</div>

这里我们定义了一个方法，goto接收一个参数index，跳转到指定页数

methods: {goto(index) {this.nowIndex = index;}
}

在点击前一页和后一页的时候我们用到了一个nextIndex和prevIndex，这两个变量我们定义在计算属性里

computed: {prevIndex() {if(this.nowIndex === 0) {return this.slides.length - 1;}else {return this.nowIndex - 1;}},nextIndex() {if(this.nowIndex === this.slides.length-1) {return 0;}else {return this.nowIndex + 1;}}
}

样式如下：

.slide-show {position: relative;width: 900px;height: 350px;margin: 15px 15px 15px 0;overflow: hidden;}.slide-img {width: 100%;}.slide-img img {width: 100%;position: absolute;top:0;}.slide-show h2 {position: absolute;bottom: 0;color: #fff;background-color: #000;opacity: 0.5;text-align: left;width: 100%;;height: 30px;line-height: 30px;padding-left: 15px;}.slide-pages {position: absolute;bottom: 10px;right: 15px;}.slide-pages li {display: inline-block;padding: 0 10px;cursor: pointer;color: #fff;}.slide-pages li .on {text-decoration: underline;}

三、自动播放

自动播放我们使用的方法是setInterval，为了让组件更加灵活，自动播放间隔的时间可以由父组件传入，inv为Number类型的props。
当鼠标移入时触发clearInv，鼠标移出时触发runInv

methods: {runInv() {this.invId = setInterval(() => {this.goto(this.nextIndex);}, this.inv);}clearInv() {clearInterval(this.invId);}
},
mounted() {this.runInv();
}

四、动画效果

动画效果就是在切换图片的时候，前一张离开，后一张进来，会有一个时刻两张图片同时存在。使用的是vue的transition.
组件中需要加入一个新的data，isShow为true时新的图片显示

data() {return {nowIndex: 0,isShow: false}
}

更改html显示图片的部分

<transiton name="slide-trans"><img v-if="isShow" :src="slides[nowIndex].src"/>
</transition>
<transition name="slide-trans-old"><img v-if="!isShow" :src="slides[nowIndex].src"/>
</transition>

第一个transition包含的为新要显示的图片，第二个transition包含的为将要消失的旧图片。
修改goto方法，在10ms后更改nowInex和isShow，这样在两个transition中就是不同的图片了

goto(index) {this.isShow = false;setTimeout(() => {this.isShow = true;this.nowIndex = index;})
}

在样式中加入

.slide-trans-enter-active {transition: all .5s;}.slide-trans-enter {transform: translateX(900px);}.slide-trans-old-leave-active {transition: all .5s;transform: translateX(-900px);}