var showIndex = 0;
function showbg(src) {
    var index = $("#flashs .btn span").index($("#flashs .btn span.cur"));
    if (index < 0) { index = 0; } 
    $("#flashs .btn span.cur").removeClass("cur");
    $("#flashbg" + index).stop().animate({
        opacity: 0
    }, 400); 
    $("#flashbg" + showIndex).stop().animate({
        opacity: 1
    }, 500, function () { 
        $("#flashbg" + index).css({"z-index":1});
        $("#flashbg" + showIndex).css({ "z-index": 2 });
    });
    $("#flashs .btn span").eq(showIndex).addClass("cur"); 
}
var h = $("#flashs div.bgitem").css({ "opacity": 0,"z-index":1}).length;
var btn = "<div class='btn'>";
for (var i = 0; i < h; i++) {
    btn += "<span>" + (i + 1) + "</span>";
}
btn += "</div>";
$("#flashs").append(btn);
$("#flashs .btn span").mouseenter(function () {
    showIndex = $("#flashs .btn span").index(this);
    showbg(showIndex);
});
$("#flashs").hover(function () {
    clearInterval(picTimer);
}, function () {
    picTimer = setInterval(function () {
        showIndex++;
        if (showIndex == h) { showIndex = 0; }
        showbg(showIndex);
    }, 4000)
}).eq(0).trigger("mouseleave");
$("#flashbg" + showIndex).css({ "z-index": 2, "opacity": 1 });
$("#flashs .btn span").eq(showIndex).addClass("cur");