Question

我正在搜索支持每张幻灯片超时和转换的jQuery幻灯片。

从我的研究来看，似乎Cycle Plugin是最接近的，因为它有明显的默认转换选择，我甚至发现了如何从这个线程设置每个幻灯片的超时：< / p>

jQuery Slideshow with Random Timeouts （以及关于这个主题的FAQ pages）

但是，我没有看到设置每个幻灯片转换的方法，这是一个交易破坏者。（可能没有修改现有的插件，看起来它可能比我想要的更深）

任何人都可以建议一种方法来完成我想要的东西吗？如果必须，我愿意重写插件，但也许有人知道更快捷/更容易的方式。

提前致谢！

更新我设法通过生成以逗号分隔的转换列表并将它们作为fx:插件的.cycle选项的值传递来满足我的要求。作为参考，我使用上面链接的常见问题解答页面作为每个幻灯片的时间，以及每个幻灯片转换的“This page shows how to use multiple effects on a single slideshow.”页面。

Answer 1

我设法通过生成以逗号分隔的转换列表并将它们作为.cycle插件的fx：选项的值传递来满足我的要求。作为参考，我使用上面链接的常见问题解答页面作为每个幻灯片的时间，以及每个幻灯片转换的“This page shows how to use multiple effects on a single slideshow.”页面。

Answer 2

现在使用Cycle2 plugin可以轻松实现这一目标。

例如（未经过测试，但是从Cycle2 site复制）：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://jquery.malsup.com/cycle2/jquery.cycle2.js"></script>
<script src="http://jquery.malsup.com/cycle2/jquery.cycle2.tile.js"></script>

<div class="cycle-slideshow" 
    data-cycle-timeout=0
    data-cycle-next="#next5"
    data-cycle-prev="#prev5"
    >
    <img src="http://jquery.malsup.com/cycle2/images/p1.jpg" data-cycle-fx=tileSlide data-cycle-tile-vertical=false>
    <img src="http://jquery.malsup.com/cycle2/images/p2.jpg" data-cycle-fx=tileBlind data-cycle-tile-count=12>
    <img src="http://jquery.malsup.com/cycle2/images/p3.jpg" data-cycle-fx=tileSlide data-cycle-tile-count=4>
    <img src="http://jquery.malsup.com/cycle2/images/p4.jpg" data-cycle-fx=tileBlind data-cycle-tile-vertical=false>
</div>

不需要javascript！

jQuery幻灯片，每个幻灯片的过渡/持续时间

2 个答案: