0

我正在制作一个简单的轮播图片库。目前我有两张图片，我希望画廊在最后一张图片之后循环回第一张图片，我无法弄清楚如何让这个功能正常工作，而且我的上一个和下一个按钮由于某种原因停止工作。我缺乏 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;
        });
    }

});
4

1 回答 1

0

测试了你的小提琴，javascript运行良好，只有css缺少以下属性：

#gallery-wrapper {
    position:relative;
}

#gallery {
    position:absolute;
}

并且代码也需要在里面执行

$(window).load();

而不是$(document).ready(); 事件处理程序正常工作。

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

于 2013-05-19T05:54:46.193 回答