html实现手风琴轮播图,jQuery手风琴轮播图

$(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();

})