没看懂var btn="<div class='btnBg'></div><div class='btn'>";
for(var i=0; i<imgNum; i++){
btn+="<span></span>";
}
btn+= "</div><div class='preNext pre'></div><div class='preNext next'></div>";这一部分
$(function () {
var timer=null;
var index=0;
var imgWidth=$('#focus').width();
var imgNum=$('#focus ul li').length;
var btn="<div class='btnBg'></div><div class='btn'>";
for(var i=0; i<imgNum; i++){
btn+="<span></span>";
}
btn+= "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$('#focus').append(btn);
$('#focus .btnBg').fadeTo(0,0.5)
$('#focus ul').width(imgNum*imgWidth);
$('#focus span').fadeTo(0,0.4)
$('#focus .preNext').fadeTo(0,0.2)
$('#focus span').mouseover(function () {
index= $('#focus span').index($(this));
showPics(index)
}).eq(0).trigger('mouseover')
$('#focus .preNext').hover(function () {
$(this).stop(true).animate({
opacity:0.5
})
},function () {
$(this).stop(true).animate({
opacity:0.2
})
})
$('#focus .pre').click(function () {
index-=1;
if(index<0) index=imgNum-1;
showPics(index);
})
$('#focus .next').click(function () {
index+=1;
if(index==imgNum) index=0;
showPics(index);
})
$('#focus').hover(function (){
clearInterval(timer);
},function (){
timer=setInterval(function () {
showPics(index);
index++;
if(index==imgNum){
index=0
}
},2000)
}).trigger('mouseleave')
function showPics(index){
var newLen=(-index*imgWidth);
$('#focus ul').stop(true).animate({
left:newLen
},200)
$('#focus span').stop(true).animate({
opacity:0.4
},300)
.eq(index).stop(true).animate({
opacity:1
},300)
}
})
循环体里做的是对应每张图片的按钮。和“向前” “向后”拼接成字符串 再绑定到id为focus的标签里