0

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

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

任何建议，非常感谢。

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

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

在 plunker 中尝试一下。

于 2015-03-25T21:09:49.193 回答
1

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

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

SetIntervl 将导致延迟初始化。只需在窗口加载时调用您的初始化函数，如下所示：

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