组件中：
<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)"><</li>
<li v-for="(item,index) in slidesList" @click="goto(index)" :class="{on: index === nowindex }">{{index+1}}</li>
<li @click="goto(nextIndex)">></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;
900px;
height: 500px;
overflow: hidden;
}
.slide-show h2 {
position: absolute;
100%;
height: 100%;
color: #fff;
background: #000;
opacity: .5;
bottom: 0;
height: 30px;
text-align: left;
padding-left: 15px;
}
.slide-img {
100%;
}
.slide-img img {
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,
}
}
}