您的位置：首页 > Web前端 > Vue.js

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

2019-04-11 09:17 966 查看

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航