0

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

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

我setTimeout(function(){})目前有它可以自动移动它，效果很好（除非你也点击标签，但这是另一个问题）。我只想让它在它处于最后一个状态（numTabs - 1）时进行动画处理并将其状态移回第一个状态。

代码：

(function($) { var methods = { init: function(options) { var settings = $.extend({ 'speed': '1000', 'interval': '1000', 'auto': 'on' },选项）;

        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

4

1 回答 1

0

放开.each()andsetTimeout()组合并使用它可能会更好setInterval()。使用.each()自然会将您的循环限制在集合的长度内，因此最好使用不是的循环机制，并且您可以在您选择的任何点中断。

此外，您可以通过检查来轻松识别当前可见元素.active，从我所看到的。

你可能需要这样的东西：

setInterval(function () {
    // do this check here.
    // it saves you a function call and having to pass in $sliderContainer
    if ($sliderContainer.attr('data-paused') === 'true') { return; }

    // you really need to just pass in the settings object.
    // the current element you can identify (as mentioned),
    // and $amountToMove is derivable from that.
    methods.animate(settings);
}, i * settings.interval);

// ...

// cache your slider tabs outside of the function
// and just form a closure on that to speed up your manips
var slidertabs = $('.js-slider-tabs');
animate : function (settings) {

    // identify the current tab
    var current = slidertabs.find('li.active'),

    // and then do some magic to determine the next element in the loop
        next = current.next().length >= 0 ? 
                   current.next() : 
                   slidertabs.find('li:eq(0)')
        ;

    current.removeClass('active');
    next.addClass('active');

    // do your stuff

};

代码没有优化，但我希望你能看到我在这里的位置。

于 2012-05-07T05:37:13.160 回答