輪播圖片庫的問題

Question

我正在制作一個簡單的輪播圖片庫。 目前，我有兩個圖像，我希望圖庫在最后一個圖像之后循環回到第一個圖像，但我無法弄清楚如何使此功能正常工作，並且上一個和下一個按鈕由於某種原因已停止工作。 我的jq / js技能不足，不勝感激可以幫助您完成此工作。 這是我的代碼[1]的jsfiddle： http : //jsfiddle.net/jsavage/kGAxa/39/

$(document).ready(function () {
    if (jQuery("#gallery").length) {
        // declare variables
        var totalImages = jQuery("#gallery > li").length,
            imageWidth = jQuery("#gallery > li:first").outerWidth(true),
            totalWidth = imageWidth * totalImages,
            visibleImages = Math.round(jQuery("#gallery-wrapper").width() / imageWidth),
            visibleWidth = visibleImages * imageWidth,
            stopPosition = (visibleWidth - totalWidth);

        jQuery("#gallery").width(totalWidth);

        jQuery("#gallery-prev").click(function () {
            if (jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")) {
                jQuery("#gallery").animate({
                    left: "+=" + imageWidth + "px"
                });
            }
            return false;
        });

        jQuery("#gallery-next").click(function () {
            if (jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")) {
                jQuery("#gallery").animate({
                    left: "-=" + imageWidth + "px"
                });
            }
            return false;
        });
    }

});

Answer 1

測試了您的小提琴，javascript很好用，只有CSS缺少以下屬性：

#gallery-wrapper {
    position:relative;
}

#gallery {
    position:absolute;
}

而且代碼也需要在內部執行

$(window).load();

而不是$（document）.ready（）; 事件處理程序才能正常工作。

http://jsfiddle.net/kGAxa/42/