vue制作幻灯片-左右移动

组件中：

<template>
<div class="slide-show" @mouseover="clearInv" @mouseout="runInv">
<div class="slide-img">
<a :href="slidesList[nowindex].href">
<transition name="slide-trans">
<img v-if="isShow" :src="slidesList[nowindex].src" />
</transition>

<transition name="slide-trans-old">
<img v-if="!isShow" :src="slidesList[nowindex].src" />
</transition>
</a>
</div>

<h2></h2>
<ul class="slide-pages">
<li @click="goto(prevIndex)">&lt;</li>
<li v-for="(item,index) in slidesList" @click="goto(index)" :class="{on: index === nowindex }">{{index+1}}</li>
<li @click="goto(nextIndex)">&gt;</li>
</ul>
</div>
</template>

<script>

export default {
props: {
slidesList: {
type: Array,
default: []
},
time: {
type: Number,
default: 1000
}
},
data () {
return {
nowindex: 0,
isShow: true,
}
},
computed: {
prevIndex () {
if(this.nowindex === 0){
return this.slidesList.length - 1
}else{
return this.nowindex - 1
}
},
nextIndex () {
if(this.nowindex === this.slidesList.length-1){
return 0
}else{
return this.nowindex + 1
}
}
},
methods: {
goto (index) {
this.isShow = false
setTimeout(() => {
this.isShow = true
this.nowindex = index;
},10)
},
runInv () {
this.clr=setInterval(() => {
this.goto(this.nextIndex);
}, this.time)
},
clearInv(){
clearInterval(this.clr)
}
},
mounted () {
this.runInv ()
}
}
</script>

<style>
.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>

 

页面中：

<sild-show :slidesList= "slides" :time="slideSpeed"></sild-show>

import sildShow from "../components/sildeShow"
export default{
　　components:{
　　sildShow
　　},

　　data () {
　　return {
　　　　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: 'detail/publish'
　　　　},
　　　　{
　　　　　　src: require('../assets/slideShow/pic4.jpg'),
　　　　　　title: 'xxx4',
　　　　　　href: 'detail/forecast'
　　　　}
　　　　],
　　　　slideSpeed: 2000,

　　}

　　}

}