效果:
布局:js代码:
js部分:
var btn=$("#btn li");
var list = $("#pic_con img");
var pre = $("#pre");
var next = $("#next");
var pic_con = $("#pic_con");
btn.click(function () {
var cur = $(this).index();
$(this).addClass("on").siblings().removeClass("on");
pic_con.animate({left: -646 * cur}, 2000);
});
pre.click(function () {
var cur = $(".on").index();
cur += 1;
if (cur > btn.length) {
cur = 0;
btn.eq(cur).addClass("on").siblings().removeClass("on");
} else {
pic_con.animate({left: -646 * cur}, 2000);
if (cur !== btn.length) {
btn.eq(cur).addClass("on").siblings().removeClass("on");
} else {
btn.eq(0).addClass("on").siblings().removeClass("on");
pic_con.animate({left: 0}, 0);
}
}
});
next.click(function () {
var cur = $(".on").index();
cur -= 1;
if (cur < -1) {
cur = $("#pic_con img").length;
btn.eq(cur).addClass("on").siblings().removeClass("on");
} else {
pic_con.animate({left: -646 * cur}, 2000);
if (cur !== -1) {
btn.eq(cur).addClass("on").siblings().removeClass("on");
} else {
cur=$("#pic_con img").length-3;
btn.eq(cur).addClass("on").siblings().removeClass("on");
pic_con.animate({left: -646 * cur}, 0);
}
}
});
//automatic carousel
var timer;
start();
function start(){
clearInterval(timer);
timer=setInterval(function(){
var cur = $(".on").index();
cur += 1;
//stop automatic carousel
stop();
if (cur > btn.length) {
cur = 0;
btn.eq(cur).addClass("on").siblings().removeClass("on");
} else {
pic_con.animate({left: -646 * cur}, 1000);
if (cur !== btn.length) {
btn.eq(cur).addClass("on").siblings().removeClass("on");
}else {
btn.eq(0).addClass("on").siblings().removeClass("on");
pic_con.animate({left: 0}, 0);
}
}
},3500);
}
//stop automatic carousel when mouse move
function stop(){
$("#container").hover(function (){clearInterval(timer);},function(){ start();
});
}