试图让我的幻灯片插件无限循环(通过回到第一个状态）

我写了一个幻灯片插件，但出于某种原因，可能是因为我整天都在研究它，一旦它达到自动模式的最后一个状态，我就无法确切地弄清楚如何让它回到状态一。

我认为在这一点上这是一个架构问题，因为基本上我为每个面板附加了向左滚动的数量(负面地((一个面板包含 4 个图像，这是当前显示给用户的图像(。第一个选项卡应得到：0，第二个 680，第三个，1360，依此类推。这只是通过计算 4 张图像的宽度加上填充来完成的。

我目前将其放在setTimeout(function(){})上以自动移动它，效果很好(除非您还单击选项卡，但这是另一个问题(。我只想在它处于最后一个状态(numTabs - 1(时这样做，以动画并将其状态移回第一个状态。

法典：

(函数($( { var 方法 = { 初始化： 函数(选项( { var settings = $.extend({ "速度"： "1000"， "间隔"："1000"， "自动"："开" }，选项(;

        return this.each(function() {
            var $wrapper = $(this);
            var $sliderContainer = $wrapper.find('.js-slider-container');
            $sliderContainer.hide().fadeIn();
            var $tabs = $wrapper.find('.js-slider-tabs li a');
            var numTabs = $tabs.size();
            var innerWidth = $wrapper.find('.js-slider-container').width();
            var $elements = $wrapper.find('.js-slider-container a');
            var $firstElement = $elements.first();
            var containerHeight = $firstElement.height();
            $sliderContainer.height(containerHeight);
            // Loop through each list element in `.js-slider-tabs` and add the
            // distance to move for each "panel". A panel in this example is 4 images
            $tabs.each(function(i) {
                // Set amount to scroll for each tab
                if (i === 1) {
                    $(this).attr('data-to-move', innerWidth + 20); // 20 is the padding between elements
                } else {
                    $(this).attr('data-to-move', innerWidth * (i) + (i * 20));
                }
            });
            // If they hovered on the panel, add paused to the data attribute
            $('.js-slider-container').hover(function() {
                $sliderContainer.attr('data-paused', true);
            }, function() {
                $sliderContainer.attr('data-paused', false);
            });
            // Start the auto slide
            if (settings.auto === 'on') {
                methods.auto($tabs, settings, $sliderContainer);
            }
            $tabs.click(function() {
                var $tab = $(this);
                var $panelNum = $(this).attr('data-slider-panel');
                var $amountToMove = $(this).attr('data-to-move');
                // Remove the active class of the `li` if it contains it
                $tabs.each(function() {
                    var $tab = $(this);
                    if ($tab.parent().hasClass('active')) {
                        $tab.parent().removeClass('active');
                    }
                });
                // Add active state to current tab
                $tab.parent().addClass('active');
                // Animate to panel position
                methods.animate($amountToMove, settings);
                return false;
            });
        });
    },
    auto: function($tabs, settings, $sliderContainer) {
        $tabs.each(function(i) {
            var $amountToMove = $(this).attr('data-to-move');
            setTimeout(function() {
                methods.animate($amountToMove, settings, i, $sliderContainer);
            }, i * settings.interval);
        });
    },
    animate: function($amountToMove, settings, i, $sliderContainer) {
            // Animate
            $('.js-slider-tabs li').eq(i - 1).removeClass('active');
            $('.js-slider-tabs li').eq(i).addClass('active');
            $('#js-to-move').animate({
                'left': -$amountToMove
            }, settings.speed, 'linear', function() {});
    }
};
$.fn.slider = function(method) {
    if (methods[method]) {
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
        return methods.init.apply(this, arguments);
    } else {
        return false;
    }
};
})(jQuery);
$(window).ready(function() {
    $('.js-slider').slider({
        'speed': '10000',
        'interval': '10000',
        'auto': 'on'
    });
});​

auto和animate方法是魔术发生的地方。参数speed是动画的速度，interval是频率，目前设置为 10 秒。

如果你愿意，谁能帮我弄清楚如何让它"无限循环"？

这是一个JSFiddle