Vue实现简单的轮播效果，用的的一些常用系统指令：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../static/vue.js"></script>
<title>Title</title>
<style>
.turn{
width: 600px;
margin:0 auto;
}
ul{
width: 300px;
margin: 0 auto;
overflow: hidden;
list-style: none;
}
ul li{
float: left;
width: 30px;
height: 30px;
background-color: hotpink;
margin-left: 10px;
line-height: 30px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div id="app" class="turn">
<img :src="currentSrc" @mouseenter="closeTime" @mouseleave="openTime">
<ul>
<a><li v-for = "(item,i) in imgArr" @click="currentChange(item)" >{{ i+1 }}</li></a>
</ul>
<button @click="lastImg">上一张</button>
<button @click="nextImg">下一张</button>
</div>
<script>
let adc =new Vue({
el:"#app",
data:{
currentSrc:"../static/picture/1.png",
imgArr:[
{id:1,src:"../static/picture/1.png"},
{id:2,src:"../static/picture/2.jpg"},
{id:3,src:"../static/picture/3.jpeg"},
{id:4,src:"../static/picture/4.jpg"},
{id:5,src:"../static/picture/5.jpg"},
{id:6,src:"../static/picture/6.jpg"},
],
imgIndex:0,
timer:null,
},
created(){
this.timer= setInterval(this.nextImg,2000)
},
computed:{
reverseStr:{
set:function (newValue) {
},
get:function () {
}
}
},
methods:{
currentChange(item){
this.currentSrc=item.src;
},
lastImg(){
if(this.imgIndex==0){
this.imgIndex=this.imgArr.length
}
this.imgIndex--;
this.currentSrc=this.imgArr[this.imgIndex].src
},
nextImg(){
if(this.imgIndex==this.imgArr.length-1){
this.imgIndex=-1
}
this.imgIndex++;
this.currentSrc=this.imgArr[this.imgIndex].src
},
closeTime(){
clearInterval(this.timer);
},
openTime(){
this.timer=setInterval(this.nextImg,2000);
}
}
})
</script>
</body>
</html>