*{
margin:0;
padding:0;
}
.wrapper{
position:relative;
overflow:hidden;
}
.wrapper-content{
position:absolute;
left:0;
z-index:1;
}
.wrapper-content_img{
height:542px;
border:none;
outline:none;
float:left;
}
.wrapper-buttons{
position:absolute;
width:100px;
height:20px;
text-align:center;
bottom:3px;
z-index:2;
}
.wrapper-button{
float:left;
width:8px;
height:8px;
border-radius:10px;
background:#999999;
margin:06px;
cursor:pointer;
transition: width1s;
}
.wrapper-arrow{
position:absolute;
width:36px;
height:65px;
cursor:pointer;
background-color:rgba(0,0,0,.3);
color:#fff;
display:none;
top:50%;
line-height:65px;
font-size:26px;
text-align:center;
z-index:2;
}
.wrapper:hover .wrapper-arrow{
display:block;
background-color:rgba(0,0,0,.7);
}
.wrapper-prev{
left:10px;
}
.wrapper-next{
right:10px;
}
.wrapper_on{
background-color:#fc4349;
width:36px;
transition: width1s;
}
.wrapper_trans{
transition:left1sease;
}
<
>
newVue({
el:'#app',
data:{
originalData:{
img_width:'',
img_height:542,
btn_width:36,
btn_height:65,
num:3,
delay:300
},
isTrans:true,//因为到最后一张图片，index为1时，需要立即跳到第二张index也为1的图片，这个用来是否给出transition
index:1,
timer:null,//setInterval
clickdelay:false,//用来防止连续点击
clientwidth:''
},
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)
},
animate(offset){
varnode=this.$refs.wrapperContent
varself=this;
varleft=parseInt(node.style.left)-offset
this.isTrans=true
node.style.left=left+'px'
setTimeout(function(){
if(left<-(self.originalData.num*self.originalData.img_width)){
self.isTrans=false
node.style.left=-self.originalData.img_width+'px'
self.clickdelay=false//当到达最后一张图片时
}
if(left>-100){
self.isTrans=false
node.style.left=-self.originalData.num*self.originalData.img_width+'px'
self.clickdelay=false//当到达第一张图片时
}
},this.originalData.delay)
},
play(){
varself=this;
this.timer=setInterval(function(){
self.next()
},2000)
},
stop(){
this.clickdelay=false//用来防止连续点击
clearInterval(this.timer)
this.timer=null
},
turnTo(flag){
if(flag==this.index){
return
}else{
varoffset=(flag-this.index)*this.originalData.img_width
this.index=flag
this.animate(offset)
}
}
},
mounted(){
this.clientwidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
this.originalData.img_width=this.clientwidth;
/*下面是判断过渡动画是否完成*/
varnode=this.$refs.wrapperContent
vartransitions= {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
}
varself=this
for(vartintransitions){
if(node.style[t] !==undefined){
vartransitionEvent=transitions[t];
}
}
transitionEvent&&node.addEventListener(transitionEvent,function() {
self.clickdelay=false
});
this.play();
}
})