之前教別人用vue寫輪播圖，寫了個例子，只供參考，請勿吐槽

引入vue.js我就不用說了，下面試輪播圖樣式

<style>
	*{padding:0;margin:0;}
	ul{ position:relative; overflow:hidden;}
	ul li{ list-style:none; position:absolute;right:-600px;opacity: 0;
 	-webkit-transition: all .8s ease-in-out;
 	-moz-transition: all .8s ease-in-out;
 	-o-transition: all .8s ease-in-out;}
	ol li{list-style:none;}
	#map{width:600px;height:300px; position:relative;}
	ul,ul li,ul li img{width:100%;height:100%;}
	.img-active{top:0;left:0;opacity: 1;}
	.slider-nav{ position:absolute; text-align:center; width:100%; bottom:20px;}
	.slider-nav  li {
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAAAJdnBBZwAAABQAAAAUAKM7KtEAAADISURBVCjPjdI9T8JQFIDhp6cKTRz4mFpmFwz+//9hgk4YJ0sMJiKSlKVxwFo/Au07ndz7TPeeRFvI5SYytcrW2lrdXCbfLHfjyu/2HpTHMf3ic7cG/jYwk3pt4dy1U02FzREWFs41tfMRooPBQoRC1gkzs1B0MsjDuBcch2EvOIz27c8XDr3cIbz3gm/R/GVH61CqOlnlOdSWnXCpTrFzYXqGrTw227NxaXKCPbmngbzYGf3byL07q+OY/DgOhcJIhspWqWy/4xO4VSw4B3jzAwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNS0wOS0zMFQxNjowMTo1NyswODowMCbyI8YAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTUtMDktMzBUMTY6MDE6NTcrMDg6MDBXr5t6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAABJRU5ErkJggg==) no-repeat;
	width: 18px;
	height: 18px;
	border-radius: 11px;
	display: inline-block;
	padding: 2px;
	overflow: hidden;
	margin-left: 10px;
	cursor: pointer;
	font-size: 0px;
	line-height: 0px;
}
.slider-nav  li.slider-active {
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAAAJdnBBZwAAABQAAAAUAKM7KtEAAAFdSURBVCjPfZK/TsJQFIe/cxNoY40KDLZuJg4WjXHAmOoTyOTkm+hL6LOoizG6C4uDgwiDJk4UBkERSGu114Eo+Kf9ppPcL+ck9/cTxihsbHKYxAS80KJF/PUooEeDTRGLnwyoa3+kKQARcdnA8jjOtnPv8+/z7dxx1gOLkrgi3xvFZSmjT8xyXibWaS67e0EP7nVdEMChlNE3M8Vp/tDor/Ui4RpfoViFU/M/DZanT0xgFaVwMD128iRQzntgsqBwYD8rSR7CfhawFXOwbZHCtgXMKQwoGGliwQAMNf77JD7iUWwhPIVpYjcCQkUPrgZpYnUIPCt8OHrTiZrmMARaCp+gwnknSTzvVCCgqYipwW5w1/9Pa/R3A6BGrEA3eYhkvXfW0b+OXnQ3XyPhQTe/2iOssAgeB8bWVMGIdeetOjwMKwCP3GotE8V1cNOKOxmywsFhFhMIeMHHH8fxCfqkeQDbcjvwAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE1LTA5LTMwVDE2OjAxOjU3KzA4OjAwJvIjxgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNS0wOS0zMFQxNjowMTo1NyswODowMFevm3oAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAAElFTkSuQmCC) no-repeat;
}

</style>
 

然後是頁面元素

<div id="map">
    	<ul>
            <li v-for="(index,item) in images" class="img-{{index}} {{index==Iindex?'img-active':''}}"><img v-bind:src="item"/></li>
        </ul>
        <ol class="slider-nav">
        	<li v-for="(index,item) in images" class='{{index==Iindex?"slider-active":""}}' v-on:mouseenter='sliderMove' v-on:mouseleave='sliderOut' :data-id='index'></li>
        </ol>
    </div>
 

接下來看我們的js部分

var app = new Vue({
	  el: '#map',
	  data: {
		images:["https://img.alicdn.com/imgextra/i3/113/TB2o18uzUhnpuFjSZFpXXcpuXXa_!!113-0-luban.jpg_q100.jpg",
				 "https://aecpm.alicdn.com/simba/img/TB1W4nPJFXXXXbSXpXXSutbFXXX.jpg",
				 "https://img.alicdn.com/tps/i4/TB1vHgyRVXXXXbJaXXXSutbFXXX.jpg",
				 "https://img.alicdn.com/tfs/TB17RX4SXXXXXakXFXXXXXXXXXX-1130-500.jpg_q100.jpg",
				 "https://img.alicdn.com/imgextra/i2/133/TB2N_0XzHJmpuFjSZFwXXaE4VXa_!!133-0-luban.jpg_q100.jpg",
				 "https://aecpm.alicdn.com/simba/img/TB1_JXrLVXXXXbZXVXXSutbFXXX.jpg"],
		Zindex:1,
		Iindex:0,
		isMove:false
	  } ,
	  methods: {
		sliderMove:function(obj){
			var nowIndex=obj.target.attributes[1].value;
			this.Iindex=nowIndex;
			this.isMove=true;
		},
		sliderOut:function(obj){
			this.isMove=false;
		}
	  },
	  created:function(){
		  var that=this;
		  setInterval(function(){
			var length= that.images.length;
			if(!that.isMove){
				if(that.Iindex==length-1){
					that.Iindex=0;	
				}else{
					that.Iindex=parseInt(that.Iindex)+1;	
				}
		 	}
		  },2000);
	  }
	})