将自动播放功能添加到简单的 jQuery 滑块

Question

我当前的滑块功能完美，并且还有一个工作分页（分页点、活动状态和控件），但我只想添加一个新功能而不破坏任何东西：

我的滑块在页面加载时自动播放的能力。

任何建议，不胜感激。

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">•</a>
 <a href="#s2">•</a>
 <a href="#s3">•</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');
//          });

//     });
// },

Answer 1

你必须添加一个超时，它会自动调用更改图像的函数所以它会像

              setInterval(function(){
                    //call the function here
                }, 6000);

Answer 2

SetIntervl 将导致延迟 intialization.Just 在 window 加载时调用您的初始化函数，如下所示：

window.onload = function(){
 //call the init function here
}

Answer 3

前进的方法是从链接上的 "click" 事件处理程序中抽象出动画功能。这样您就可以从单击事件和计时器事件中调用动画函数。棘手的是你必须捕获 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();
}
//...

Try it in a plunker.

将自动播放功能添加到简单的 jQuery 滑块

Add autoplay function to simple jQuery slider

javascript

css

jquery

sliders