vue.js实现的幻灯片功能示例

本文实例讲述了vue.js实现的幻灯片功能。分享给大家供大家参考，具体如下：1、在父组件

本文实例讲述了vue.js实现的幻灯片功能。分享给大家供大家参考，具体如下：

1、在父组件中

<slide-show :slides="slides"></slide-show>
import SlideShow from '@/components/SlideShow'
export default {
 components: {
 SlideShow,
 },

2、在slideshow.vue中

<template>
 <div class="slide-show" @mouseover="clearInv" @mouseout="runInv"> // 当鼠标移入的时候清除，移出的时候
 <div class="slide-img">
 <a href="slides[nowIndex].href" rel="external nofollow" >
 <transition 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>
 </a>
 </div>
 <h2>{{ slides[nowIndex].title }}</h2>
 <ul class="slide-pages">
 <li @click="goto(prevIndex)"><</li>
 <li v-for="(item, index) in slides" @click="goto(index)">
 <a :class="{ on: index === nowIndex}">
 {{ index + 1 }}
 </a>
 </li>
 <li @click="goto(nextIndex)">></li>
 </ul>
 </div>
</template>
<script>
 export default {
 props: {
 slides: { // 获取父组件的属性
 type: Array,
 default: []
 },
 inv: {
 type: Number,
 default: 1000
 }
 },
 data () {
 return {
 nowIndex: 0,
 isShow: true
 }
 },
 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
 }
 }
 },
 methods: {
 goto (index) {
 this.isShow = false,
 setTimeout(() => { // 过10毫秒后，
 this.isShow = true,
 this.nowIndex = index
 }, 10)
 },
 runInv () { // 设置定时器
 this.timer = setInterval(() => {
 this.goto(this.nextIndex)
 }, this.inv)
 },
 clearInv () {
 clearInterval(this.timer)
 }
 },
 mounted () { // 加载完后执行
 this.runInv()
 }
 }
</script>
<style scoped>
.slide-trans-enter-active {
 transition: all .5s;
}
.slide-trans-enter {
 transform: translateX(900px);
}
.slide-trans-old-leave-active {
 transition: all .5s;
 transform: translateX(-900px);
}
.slide-show {
 position: relative;
 margin: 15px 15px 15px 0;
 width: 900px;
 height: 500px;
 overflow: hidden;
}
.slide-show h2 {
 position: absolute;
 width: 100%;
 height: 100%;
 color: #fff;
 background: #000;
 opacity: .5;
 bottom: 0;
 height: 30px;
 text-align: left;
 padding-left: 15px;
}
.slide-img {
 width: 100%;
}
.slide-img img {
 width: 100%;
 position: absolute;
 top: 0;
}
.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;
}
</style>

希望本文所述对大家vue.js程序设计有所帮助。

vue.js 幻灯片