1

尝试使用 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();
      });
  });

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

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

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

4

2 回答 2

2

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

该插件是您自己构建滑块的基础，它真正适合您的需求。

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

看看我根据您的要求制作的演示，第一张幻灯片持续 7 秒，而其他幻灯片持续 4 秒。

于 2012-09-14T16:12:59.917 回答
0

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

看这里，看起来play功能是“开始”按钮并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并根据下一张幻灯片设置时间。

再说一次，我只是在盲目地尝试一下，它看起来怎么样？

于 2012-09-14T16:30:35.430 回答