<img class="wrapper-content_img" alt="3" src="img/3.jpg" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/>
<img class="wrapper-content_img" alt="4" src="img/4.jpg" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/>
<img class="wrapper-content_img" alt="1" src="img/1.jpg" :style="{width:originalData.img_width+'px',height:originalData.img_height+'px'}"/>
</div>
<div class="wrapper-buttons" :style="{left:(originalData.img_width-100)/2+'px'}">
<span :class="['wrapper-button',{'wrapper_on':index==1}]" @click="turnTo(1)"></span>
<span :class="['wrapper-button',{'wrapper_on':index==2}]" @click="turnTo(2)"></span>
<span :class="['wrapper-button',{'wrapper_on':index==3}]" @click="turnTo(3)"></span>
<span :class="['wrapper-button',{'wrapper_on':index==4}]" @click="turnTo(4)"></span>
</div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" class="wrapper-arrow wrapper-prev" :style="{marginTop:-originalData.btn_width/2+'px'}" @click="prev"><</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" class="wrapper-arrow wrapper-next" :style="{marginTop:-originalData.btn_width/2+'px'}" @click="next">></a>
</div>
</div>
<a href="#" rel="external nofollow" style="width: 50px;height: 50px;position: absolute;top: 500px;">aaa</a>
<script type="text/javascript" src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
originalData:{
img_width:350,
img_height:350,
btn_width:40,
btn_height:40,
num:4,
delay:300
},
isTrans:true,//因为到最后一张图片，index为1时，需要立即跳到第二张index也为1的图片，这个用来是否给出transition
index:1,
timer:null,//setInterval
clickdelay:false//用来防止连续点击
},
methods:{
next(){
if(this.clickdelay){
return
}
this.clickdelay=true
if(this.index==this.originalData.num){
this.index=1
}else{
this.index+=1
}
this.animate(this.originalData.img_width)
},
prev(){
if(this.clickdelay){
return
}
this.clickdelay=true
if(this.index==1){
this.index=this.originalData.num
}else{
this.index-=1
}
this.animate(-this.originalData.img_width)
