0

私の現在のスライダーは完璧に機能し、ページネーション（ページ付けされたドット、アクティブ状態、およびコントロール）も機能していますが、何も壊さずに新しい機能を1つ追加したいだけです：

ページの読み込み時にスライダーを自動再生する機能。

任意の提案、大歓迎です。

HTML / マークアップ:

<div class="allslideshow">
    <div class="slideshow-wrapper">
        <div class="slide" id="s1"></div>
        <div class="slide" id="s2"></div>
        <div class="slide" id="s3"></div>
    </div>
    <div class="slideshow-nav"> <a href="#s1">•&lt;/a>
 <a href="#s2">•&lt;/a>
 <a href="#s3">•&lt;/a>
    </div>
</div>

jQuery

jQuery(document).ready(function($) {
var Slideshow = {
    paginate: function () {
        var slides = $('div.slide', '.allslideshow'),
            total = slides.length;
        $('.slideshow-nav-total').text(total);
        slides.each(function (i) {
            $(this).data('index', i + 1);
        });
    },
    navigate: function () {
        $('a', '.slideshow-nav').click(function (e) {
            e.preventDefault();
            var $a = $(this);
            var slide = $($a.attr('href'));
            var wrapper = $('.slideshow-wrapper');
            wrapper.animate({
                left: -slide.position().left
            }, 500, 'linear', function () {
                $('.slideshow-nav-current').text(slide.data('index'));
                $a.addClass('active').siblings('a').removeClass('active');
            });

        });
    },
    init: function () {
        this.paginate();
        this.navigate();
    }
};
$(function () {
    Slideshow.init();
    });
});

試み：

// autoplay: function () {
//      .ready(function) { 
//         e.preventDefault();
//         var $a = $(this);
//         var slide = $($a.attr('href'));
//         var wrapper = $('.slideshow-wrapper');
//         wrapper.animate({
//             left: -slide.position().left
//         }, 300, 'linear', function () {
//             $('.slideshow-nav-current').text(slide.data('index'));
//             $a.addClass('active').siblings('a').removeClass('active');
//          });

//     });
// },
4

3 に答える 3

1

SetIntervl は初期化の遅延を引き起こします。次のように、ウィンドウの読み込み時に初期化関数を呼び出すだけです。

window.onload = function(){
 //call the init function here
}
于 2015-03-25T20:48:46.473 に答える
1

前進する方法は、リンクの「クリック」イベント ハンドラーからアニメーション機能を抽象化することです。そうすれば、クリック イベントとタイマー イベントの両方からアニメーション関数を呼び出すことができます。これについてのトリッキーな点はthis、クロージャー内で使用するためにコンテキストをキャプチャする必要があることです。これが私が意味することです：

//...
moveTo: function($a) {
  var slide = $($a.attr('href'));
  var wrapper = $('.slideshow-wrapper');
  wrapper.animate({
    left: -slide.position().left
  }, 500, 'linear', function () {
    $('.slideshow-nav-current').text(slide.data('index'));
    $a.addClass('active').siblings('a').removeClass('active');
  });
},
navigate: function () {
    var self = this;
    $('a', '.slideshow-nav').click(function (e) {
        e.preventDefault();
        if (self.interval) {
          clearInterval(self.interval);
          self.interval = false;
        }
        var $a = $(this);
        self.moveTo($a);
    });
},
autoPlay: function() {
  var $alist = $('a', '.slideshow-nav');
  var i = 0;
  var self = this;
  this.interval = setInterval(function() {
    var $a = $alist.eq(i++);
    i %= $alist.length;
    self.moveTo($a);
  }, 1000);
},
init: function () {
    this.paginate();
    this.navigate();
    this.autoPlay();
}
//...

プランカーで試してみてください。

于 2015-03-25T21:09:49.193 に答える
1

画像を変更する関数を自動的に呼び出すタイムアウトを追加する必要があるため、次のようになります

              setInterval(function(){
                    //call the function here
                }, 6000);
于 2015-03-25T20:35:52.513 に答える