<script>
var indexlog=true;
$('.banner li').each(function(){
$('li[data_index=0]').css('left','0');
});
function animation(num){
var index= parseInt($('.current').attr('data_index'));
$('li').removeClass('current');
if(num>sum){//大于最大角标 从0开始
$('.banner li[data_index="'+0+'"]').css('left','1000px');
$('.banner li[data_index="'+index+'"]').animate({'left':'-1000px'},1000,function(){
$(this).css('left','1000px')
});
$('.banner li[data_index="'+0+'"]').animate({'left': '0px'},1000, function(){
$(this).addClass('current');
})
}else if(num<0){ // 小于0 从最大角标开始
$('.banner li[data_index="'+sum+'"]').css('left','-1000px');
$('.banner li[data_index="'+index+'"]').animate({'left':'1000px'},1000,function(){
$(this).css('left','-1000px')
});
$('.banner li[data_index="'+sum+'"]').animate({'left': '0px'},1000, function(){
$(this).addClass('current');
})
}else {
if(num < index){ // num<index 左移
$('.banner li[data_index="'+num+'"]').css('left','-1000px');
$('.banner li[data_index="'+index+'"]').animate({'left':'1000px'},1000,function(){
$(this).css('left','-1000px')
});
$('.banner li[data_index="'+num+'"]').animate({'left': '0px'},1000, function(){
$(this).addClass('current');
})
}else if(num>index){// num>index 右移
$('.banner li[data_index="'+num+'"]').css('left','1000px');
$('.banner li[data_index="'+index+'"]').animate({'left':'-1000px'},1000,function(){
$(this).css('left','1000px')
});
$('.banner li[data_index="'+num+'"]').animate({'left':'0px'},1000,function(){
$(this).addClass('current');
});
}
else{ //自动轮播
$('.banner li[data_index="'+index+'"]').animate({'left':'-1000px'},1000,function(){
$(this).css('left','1000px')
});
var n= index >= sum ? 0 : index+1;
$('.banner li[data_index="'+n+'"]').css('left','1000px');
$('.banner li[data_index="'+n+'"]').animate({'left':'0px'},1000,function(){
$(this).addClass('current');
});
}
}
}
if(indexlog){
var timer= setInterval(animation,3000);
$('.box ul').hover(function(){
clearInterval(timer)
},function(){
timer=setInterval(animation, 3000);
});
$('.tap').click(function(){
animation(parseInt($(this).attr('data_index')));
})}
var num=0;
var sum=$('.box ul li').length-1;
$('.arrowBox .rightArrow').click(function(){
num=parseInt($('.current').attr('data_index'));
indexlog=false;
num++;
animation(num);
console.log("x++="+num);
})
$('.arrowBox .leftArrow').click(function(){
num=parseInt($('.current').attr('data_index'));
indexlog=false;
num--;
animation(num);
console.log("x--="+num);
var indexlog=true;
$('.banner li').each(function(){
$('li[data_index=0]').css('left','0');
});
function animation(num){
var index= parseInt($('.current').attr('data_index'));
$('li').removeClass('current');
if(num>sum){//大于最大角标 从0开始
$('.banner li[data_index="'+0+'"]').css('left','1000px');
$('.banner li[data_index="'+index+'"]').animate({'left':'-1000px'},1000,function(){
$(this).css('left','1000px')
});
$('.banner li[data_index="'+0+'"]').animate({'left': '0px'},1000, function(){
$(this).addClass('current');
})
}else if(num<0){ // 小于0 从最大角标开始
$('.banner li[data_index="'+sum+'"]').css('left','-1000px');
$('.banner li[data_index="'+index+'"]').animate({'left':'1000px'},1000,function(){
$(this).css('left','-1000px')
});
$('.banner li[data_index="'+sum+'"]').animate({'left': '0px'},1000, function(){
$(this).addClass('current');
})
}else {
if(num < index){ // num<index 左移
$('.banner li[data_index="'+num+'"]').css('left','-1000px');
$('.banner li[data_index="'+index+'"]').animate({'left':'1000px'},1000,function(){
$(this).css('left','-1000px')
});
$('.banner li[data_index="'+num+'"]').animate({'left': '0px'},1000, function(){
$(this).addClass('current');
})
}else if(num>index){// num>index 右移
$('.banner li[data_index="'+num+'"]').css('left','1000px');
$('.banner li[data_index="'+index+'"]').animate({'left':'-1000px'},1000,function(){
$(this).css('left','1000px')
});
$('.banner li[data_index="'+num+'"]').animate({'left':'0px'},1000,function(){
$(this).addClass('current');
});
}
else{ //自动轮播
$('.banner li[data_index="'+index+'"]').animate({'left':'-1000px'},1000,function(){
$(this).css('left','1000px')
});
var n= index >= sum ? 0 : index+1;
$('.banner li[data_index="'+n+'"]').css('left','1000px');
$('.banner li[data_index="'+n+'"]').animate({'left':'0px'},1000,function(){
$(this).addClass('current');
});
}
}
}
if(indexlog){
var timer= setInterval(animation,3000);
$('.box ul').hover(function(){
clearInterval(timer)
},function(){
timer=setInterval(animation, 3000);
});
$('.tap').click(function(){
animation(parseInt($(this).attr('data_index')));
})}
var num=0;
var sum=$('.box ul li').length-1;
$('.arrowBox .rightArrow').click(function(){
num=parseInt($('.current').attr('data_index'));
indexlog=false;
num++;
animation(num);
console.log("x++="+num);
})
$('.arrowBox .leftArrow').click(function(){
num=parseInt($('.current').attr('data_index'));
indexlog=false;
num--;
animation(num);
console.log("x--="+num);
})
</script>