1.安装swiper
npm install swiper@3.4.1 --save-dev
2.在组件中引用 swiper
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
3.实例
<template>
<div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()">
<div class="slideshow">
<transition-group tag="ul" name="image">
<li v-for="(img, index) in imgArray" v-show="index===mark" :key="index">
<a href="#">
<img :src='img'>
</a>
</li>
</transition-group>
</div>
<div class="bar">
<span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }"
@click="change(index)" :key="index"></span>
</div>
</div>
</template>
<script>
export default {
data () {
return {
timer: null, //定时器
mark: 0, //比对图片索引的变量
imgArray: [//图片路径
require('../../assets/images/index/banner1.png'),
require('../../assets/images/index/banner1.png'),
require('../../assets/images/index/banner1.png'),
require('../../assets/images/index/banner1.png')
]
}
},
methods: {
autoPlay () {
this.mark++;
if (this.mark === 4) {
this.mark = 0
}
},
play () {
this.timer = setInterval(this.autoPlay, 2500)
},
change (i) {
this.mark = i
},
stop () {
clearInterval(this.timer)
},
move () {
this.timer = setInterval(this.autoPlay, 2500)
}
},
created () {
this.play()
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
list-style: none;
}
.slide {
width: 100%;
height: 320px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.slideshow {
width: 100%;
height: 320px;
}
.slideshow ul{
width:100%;
height: 320px;
}
li {
width:100%;
position: absolute;
}
.slideshow ul a{
display: inline-block;
width:100%;
}
img {
width: 100%;
height: 320px;
}
.bar {
position: absolute;
width: 100%;
bottom: 10px;
margin: 0 auto;
z-index: 10;
text-align: center;
}
.bar span {
width: 10px;
height: 10px;
border-radius:50%;
background: white;
display: inline-block;
margin-right: 10px;
}
.active {
background: red !important;
}
.image-enter-active {
transform: translateX(0);
transition: all 1.5s ease;
}
.image-leave-active {
transform: translateX(-100%);
transition: all 1.5s ease;
}
.image-enter {
transform: translateX(100%);
}
.image-leave {
transform: translateX(0);
}
</style>