Question

这是来自nicinabox Github Link

的超级滑块的问题

我知道你可以使用'play'选项来设置一个时间，以毫秒为单位，然后自动进入下一张幻灯片。这为整个幻灯片设置了全局时间。

我希望实现的是个别幻灯片具有自己的特定进度/延迟时间。例如，如果我有一张包含20张幻灯片的幻灯片，我希望所有幻灯片自动进展并在屏幕上停留5秒钟。但是，第三张幻灯片应显示20秒。

我试图通过使用animated.slides事件来做到这一点，但我不能让它工作，因为动画停止了第四张幻灯片：

这是我的代码：

$(function () {
  $('#slides').superslides({

      hashchange: true,
      play: 5000,
      pagination: true
  });


});

$('#slides').on('animated.slides', function () {
  var current_index = $(this).superslides('current');

  if (current_index === 2) { // third slide

      $(this).superslides('stop');

      var disp = function test1() {

          setTimeout(function ()

              {
                  $('#slides').superslides('animate', 3)
              }, 20000);

      }
      disp();

  }

});

任何帮助将不胜感激。也许有人在那里解决我的问题。

Answer 1

将.superslides('animate', 3)替换为.superslides('start')。

Demo（条件是2，正如你最初写的那样）

Answer 2

这样做：

$('#slides').on('animated.slides', function () {
  var current_index = $(this).superslides('current');

  if (current_index === 2) { // third slide

      $(this).superslides('stop');

      var disp = function test1() {

          setTimeout(function ()

              {
                  $('#slides').superslides('start')
              }, 20000);

      }
      disp();

  }

});

<强> FIDDLE

Answer 3

你可以这样做：

$('#slides').superslides({
      hashchange: true,
      play: 500,
      pagination: true
  });

$('#slides').on('animated.slides', function () {
    var slideNo = $(this).superslides('current');
    if(slideNo === 2){
        $(this).superslides('stop');
        setTimeout(function(){
            $('#slides').superslides('start')
        }, 2000);
    }
});

这是fiddle。

单个滑动延迟//超级滑动

3 个答案: