Question

尝试使用slides.js jquery插件创建幻灯片。

我想要的是第一张幻灯片（其中嵌入了一个视频）显示7秒，其余幻灯片显示每个显示4秒钟。

这是我到目前为止所尝试的：

  $(function(){
      $('#slides').slides({
          preload: true,
          generateNextPrev: false,
          play: function(){
              if($('#slides').childNodes[2].css('display', 'block')){
                   return 7000;
              } else {
                   return 4000;
              } 
          }
      });
      $("#menu select").change(function() {
          window.location = $(this).find("option:selected").val();
      });
  });

起初我认为每次幻灯片更改时都会运行此功能。我现在意识到这个anon函数运行一次并完成。这意味着它不会回来查看该幻灯片不是display: block;还是display: none;。这让我想知道该怎么做。

我检查了slide.js页面上的文档，但没有看到任何能够提供帮助的突出显示。

TLDC：是否可以使用slides.js显示可变长度的显示时间？如果它不是我可以使用的？

Answer 1

似乎很容易使用slides.js，所以让我介绍一下我自己的jQuery滑块Do It Yourself Slider。

这个插件是你自己构建滑块的基础，一个真正符合您需求的。

因此，你可以做任何你想做的事情，因为你必须自己做：你不受插件的限制。

看看我为你提出的问题所做的demo，第一张幻灯片持续7秒，而其他人持续4张。

Answer 2

我从来没有亲自使用过这个，所以如果我不在基地就道歉。

查看here，看起来play函数是“go”按钮，而pause会停止它。您需要的是在每个动画上运行的内容，而不仅仅是最初的play事件。请改为animationStart。

  $('#slides').slides({
      preload: true,
      generateNextPrev: false,
      play: 7000,
      animationStart: function(){
          if($('#slides').childNodes[2].css('display', 'block')){
               $("#slides").slides({ slideSpeed: 7000 });
          } else {
               $("#slides").slides({ slideSpeed: 4000 });
          } 
      }

不确定它是否在动画之前立即运行（然后运行完美）或动画开始后立即运行。如果是，请尝试使用animationComplete并根据下一张幻灯片设置时间。

同样，我只是盲目地捅了一下，看起来怎么样？

创建具有可变长度幻灯片显示的幻灯片

2 个答案: