0

スライドショー プラグインを作成しましたが、何らかの理由で 1 日中取り組んでいたためか、オンのときに最後の状態に到達すると、状態 1 に戻す方法が正確にわかりません。オートモード。

基本的に、各パネル (パネルには現在ユーザーに表示されている 4 つの画像が含まれています) に対して左にスクロールする量を (負に) 付けているため、現時点ではアーキテクチャ上の問題だと考えています。最初のタブは 0、2 番目は 680、3 番目は 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()andコンボを手放して、代わりにsetTimeout()just を使用する方がおそらく良いでしょう。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 に答える