javascript - Jquery自定义滑块无限循环

Question

我使用本教程做了 jquery 滑块

http://css-plus.com/2010/09/create-your-own-jquery-image-slider/

，图片会自动滑动，但只有一次。如何让它们无限循环？

在线示例：

www.vytvarkajablonec.jecool.net/ati

我真的很感谢你的帮助！

Answer 1

为此替换教程中的 JS 代码：

$(document).ready(function () {

    // Gallery
    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-wrap").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"
                });
            }

            if (jQuery("#gallery").position().left === 0) {
                jQuery("#gallery > li:last").prependTo($("#gallery"));
            }

            return false;
        });

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

            if (jQuery("#gallery").position().left === stopPosition) {
                jQuery("#gallery > li:first").appendTo($("#gallery"));
            }

            return false;
        });
    }

});

Answer 2

如果它在画廊的末端，只需将画廊动画返回到它的初始位置。

var oGallary = $('#gallery');
var gallarWidth = oGallary.width();

if(oGalary.position().left > stopPosition && oGallary.is(":animated") == false)
{
    oGallary.animate({left : "-=" + imageWidth + "px"});
}
else if ( oGalary.position().left <= stopPosition && oGallary.is(":animated") == false )
{  
    oGallary.animate({left : "+=" + gallaryWidht + "px"}) // Get full length of the entire gallary
}