在页面中的幻灯片一般都会作为一个组件,由父组件将幻灯片组件需要的数据传入,数据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)"><</li>
<li v-for="(item, index) in slides" @click="goto(index)">
<a :class="{on: index === nowIndex}">{{index + 1}}</a>
</li>
<li @click="nextIndex">></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);
}
原文地址:http://blog.csdn.net/haijing1995/article/details/78332809