关于Jquery轮播图的问题。

Question

没看懂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)
}

})

Answer 1

循环体里做的是对应每张图片的按钮。和“向前” “向后”拼接成字符串 再绑定到id为focus的标签里