0

このスライダーを Web サイトで使用する予定ですが、自動再生オプションがありません。マウスクリックイベントでスライドするだけです。

jquery は次のとおりです。

(function($){

    $('.square-slider').each(function(){
        var slider = $(this),
            slides = slider.find('.slide'),
            currentSlide = 0;

        slides.show();
        $(slides[currentSlide]).addClass('active');
        $('.next,.prev', slider).show();

        $('.prev', slider).on('click', function(){
            slides.removeClass('active');
            currentSlide--;
            if(currentSlide < 0) currentSlide = slides.length - 1;
            $(slides[currentSlide]).addClass('active');
            return false;
        });

        $('.next', slider).on('click', function(){
            slides.removeClass('active');
            currentSlide++;
            if(currentSlide > slides.length - 1) currentSlide = 0;
            $(slides[currentSlide]).addClass('active');
            return false;
        });
    });

})(window.jQuery);

ある画像から別の画像への自動スライドを有効にするには、何を追加しますか。

4

2 に答える 2

1

あなたができることは、定期的に次のボタンクリックイベントをトリガーすることです。

例

setInterval(function(){
  $('.next').trigger('click');
},2000);

DEMO

于 2013-04-27T04:01:22.183 に答える
1

これらのコードを次のような関数でラップします。

function next() {

slides.removeClass('active');
currentSlide++;
if(currentSlide > slides.length - 1) currentSlide = 0;
$(slides[currentSlide]).addClass('active');

}

setInterval()次に、次のようなJavaScriptの機能を利用できます。

setInterval( next(), 5000);

そうすれば、 next() 関数は 5 秒ごとに実行されます。

于 2013-04-27T04:01:38.690 に答える