$(function() {
var sWidth = $("#focus1").width();
var len = $("#focus1 ul li").length;
var index = 0;
var picTimer;
var btn = "
";
for(var i=0; i < len; i++) {
btn += "";
}
btn += "
";
$("#focus1").append(btn);
$("#focus1 .btnBg").css("opacity",0.5);
$("#focus1 .btn span").css("opacity",0.4).mouseover(function() {
index = $("#focus1 .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseover");
$("#focus1 .preNext").css("opacity",0.2).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.5"},300);
},function() {
$(this).stop(true,false).animate({"opacity":"0.2"},300);
});
$("#focus1 .pre").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics(index);
});
$("#focus1 .next").click(function() {
index += 1;
if(index == len) {index = 0;}
showPics(index);
});
$("#focus1 ul").css("width",sWidth * (len));
$("#focus1").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if(index == len) {index = 0;}
},4000); //此4000代表自动播放的间隔,单位:毫秒
}).trigger("mouseleave");
function showPics(index) {
var nowLeft = -index*sWidth;
$("#focus1 ul").stop(true,false).animate({"left":nowLeft},300);
//$("#focus1 .btn span").removeClass("on").eq(index).addClass("on");
$("#focus1 .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300);
}
});