Jquery自定义滑块无限循环答案

【问题标题】：Jquery custom slider infinite loopJquery自定义滑块无限循环
【发布时间】：2013-08-01 23:21:55
【问题描述】：

我使用本教程做了 jquery 滑块

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

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

在线示例：

www.vytvarkajablonec.jecool.net/ati

非常感谢您的帮助！

【问题讨论】：

使用setInterval()，反复调用函数参考：w3schools.com/jsref/met_win_setinterval.asp
给出这个答案stackoverflow.com/questions/2060140/…

标签： javascript jquery slider

【解决方案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;
        });
    }

});

【讨论】：

现在它卡在最后一张幻灯片上（这里：vytvarkajablonec.jecool.net/ati）。我的意思是当最后一张幻灯片到达时，下一张应该成为第一张。（幻灯片 1 -> 幻灯片 2 -> 幻灯片 3 -> 幻灯片 1 -> 幻灯片 2 等等......）
你为什么要再次附加这些项目？这只会导致页面使用更多内存。如我的回答所示，您也可以通过在最后重新启动它来“使它们无限循环”，是吗？
@JiříOláh 您更改了教程中的所有代码？看我的例子jsfiddle.net/sbml/NWntU
@Sbml 我做了：jsfiddle.net/ChxDr。只有我的 CSS 有点不同，因为我在其中有我的边距等...
真诚地，我不知道您为什么要使用本教程中的代码，因为您有这么多更好的选择，例如caroufredsel.dev7studios.com

【解决方案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
}

【讨论】：