$(function() {
var imgCounter = 6; //当前轮播图序号
var timer = null;
//初始化,将所有照片有序地放入img盒子里
$('li').each(function(index) {
$(this).css('left', index * 100);
})
function rotation(counter) {
$('li').eq(counter).stop().animate({
left: counter * 100 + 'px' //将点击的图片位置放入到初始化的位置
}, 700);
$('li').eq(counter).nextAll().each(function(index) { //对当前图片的往后的所有图片进行重新定位
$(this).stop().animate({
left: 500 + counter * 100 + index * 100 + 'px' //具体的位置定位,
}, 700)
})
$('li').eq(counter).prevAll().each(function(index) { //对当前图片的往前的所有图片进行重新定位
$(this).stop().animate({
left: (counter - index - 1) * 100 + 'px' //具体的位置定位
}, 700);
})
}
//手风琴轮播主要功能的实现
$('li').mouseenter(function() {
var idx = $('li').index(this); //获取当前点击的图片序号
imgCounter = idx;
rotation(idx);
clearTimeout(timer);
autoRotation();
});
//自动轮播
function autoRotation() {
timer = setTimeout(function() {
if (imgCounter >= 6) {
imgCounter = 0;
} else {
imgCounter++;
}
rotation(imgCounter);
autoRotation();
}, 5000);
}
autoRotation();
})