var nowIndex = 0,
w = $('.wrapper').width(),
len = $('.item').length,//5
flag = true,//给点击加锁,只有当当前的图片滑动完事后才能被点击;
slider_timer = undefined;
function init() {
bindEvent();
slider_auto();
}
init();
function bindEvent() {
$('.preBtn').add($('.nextBtn')).add($('.item'))
.on('click', function () {
if ($(this).attr('class') == 'preBtn') {
move('pre');
changeOrderStyle(nowIndex);
} else if ($(this).attr('class') == 'nextBtn') {
move('next');
changeOrderStyle(nowIndex);
} else {
// move($(this).index());
// $(this).siblings().removeClass('active').end().addClass('active');
nowIndex = $(this).index();
move(nowIndex);
changeOrderStyle(nowIndex);
}
})
$('.wrapper').mouseover(function(){
clearTimeout(slider_timer);
$('.btn').css('display','block');
})
.mouseout(function(){
slider_auto();
$('.btn').css('display','none');
})
}
function move(direction) {
if (flag) {
flag = false;
if (direction == 'pre' || direction == 'next') {
if (direction == 'pre') {//往前翻图片往左走 left变负值
if (nowIndex == len - 1) {//当是最后一张的时候 将ul的left值拖到第一张
nowIndex = 0;//先轮播最后一张图片(和第一张相同),轮播完最后一张后调用毁掉函数,然后瞬间挪到第一张 因为图片相同 变换的瞬间看不出差别
$('.img-box').animate({ left: -(w * len) }, function () {
$(this).css('left', 0);
clearTimeout(slider_timer);
slider_auto('next');//让其自动播放 在每次点击之后 继续调用自动播放函数
flag=true;
});
} else {
nowIndex += 1;
$('.img-box').animate({ 'left': -(w * nowIndex) }, function () {
clearTimeout(slider_timer);
slider_auto('next');//让其自动播放
flag=true;
});
}
} else {
if (nowIndex == 0) {
$('.img-box').css('left', -(w * len));//从第一张迅速跳转到最后一张(和第一张图片相同)旁人根本看不出变化
//若使用animate函数 ul移动的过程会比较缓慢能看到所有图片的变化,很不自然
nowIndex = len - 1;
} else {
nowIndex -= 1;
}
$('.img-box').animate({ 'left': -(w * nowIndex) }, function () {
clearTimeout(slider_timer);
slider_auto('next');//让其自动播放
flag=true;
});
}
} else {
nowIndex = direction;
$('.img-box').animate({ 'left': -(w * nowIndex) }, function () {
clearTimeout(slider_timer);
slider_auto('next');//让其自动播放
flag=true;
});
}
}
}
function changeOrderStyle(index) {
$('.active').removeClass('active');
$('.item').eq(index).addClass('active');
}
function slider_auto() {
slider_timer = setTimeout(function () {
move('next');
changeOrderStyle(nowIndex);
}, 3000)
}