Vue之圖片輪播
今天來看看vue怎麼實現圖片輪播，個人實現方式，如果你有更好的實現方式，歡迎來溝通，嘿嘿。
效果圖：
由於沒有素材就隨便找了123456來代替選中的圓點。
實現思路：
首先綁定數據源，循環出每個圖片，在通過isShow字段來判斷是否顯示圖片。在圖片元素寫這兩個 v-bind:src="item.src" v-show="item.isShow" 一個src用來顯示圖片，show用來判斷圖片是否顯示。
再爲123456下面這個導航添加點擊事件，通過點擊的元素來設置該數據顯示出圖片，同時其他圖片隱藏。
然後在vue created方法調用開始循環事件，來實現圖片輪播。並用一個屬性記錄起來，方便後面停止循環。
開啓輪播後，判斷當前顯示的圖片是否是最後一張如果是就從1開始，如果不是則下標加+1去顯示下一張圖片。
全部代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue輪播圖</title>
</head>
<script src="vue.min.js"></script>
<script src="clipboard.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<style type="text/css">
#test{text-align: center;margin:0 auto;}
.baner{}
.baner img{width:700px;height: 500px;}
.num{margin-top: 20px}
.num a{color: black;}
.num a span{ margin-left: 30px;font-size: 20px; text-decoration:none;}
/*.num a:hover{color: red;}*/
.isSelect {color: red;}
</style>
<body>
<div id="test">
<h1>vue輪播圖</h1>
<div class="baner">
<div class="banerimg" v-for="item in dataList">
<img v-bind:src="item.src" v-show="item.isShow">
</div>
<div class="num" @mouseover="focusImg()" @mouseout="startInterval">
<a href="javascript:void(0)" v-for="item in dataList" @click="changeImg(item.seq)">
<span :class={'isSelect':item.isShow}>{{item.seq}}</span>
</a>
</div>
</div>
</div>
</body>
<script >
new Vue({
el : "#test",
data: {
interval:'',
dataList:[
{name:'1',src:'banerSroll1.jpg',isShow:true,seq:1},
{name:'2',src:'banerSroll2.jpg',isShow:false,seq:2},
{name:'3',src:'banerSroll3.jpg',isShow:false,seq:3},
{name:'4',src:'banerSroll4.jpg',isShow:false,seq:4},
{name:'5',src:'banerSroll5.jpg',isShow:false,seq:5},
{name:'6',src:'banerSroll6.jpg',isShow:false,seq:6},
],
},
created:function(){
this.startInterval();
},
methods:{
changeImg :function(seq){
var newData = this.dataList;
for (var i = 0;i <newData.length; i++) {
if(newData[i].seq==seq)
newData[i].isShow=true;
else
newData[i].isShow=false;
}
this.dataList = newData;
},
startInterval:function(){
let that = this;
this.interval = setInterval(function(){
that.scollImg();
},1000)
},
scollImg:function(){
var newData = this.dataList.filter(function(val){return val.isShow})[0];
if(newData.seq==this.dataList.length){
this.changeImg(1);
}else{
this.changeImg(newData.seq+1);
}
},
focusImg :function(){
clearInterval(this.interval);
}
},
computed :function(){
}
})
</script>
</html>