带有每张幻灯片过渡/持续时间的 jQuery 幻灯片

Question

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

根据我的研究，似乎 Cycle 插件 是最合适的，因为它有相当多的选择默认过渡，我什至找到了如何从此线程设置每张幻灯片超时：

具有随机超时的 jQuery 幻灯片 （以及他们关于该主题的常见问题解答页面）

但是，我没有看到设置每张幻灯片过渡的方式，这是一个破坏者。 （如果不修改现有的插件，这似乎可能比我想要的更深入）

任何人都可以建议一种方法来完成我正在寻找的东西吗？如果有必要，我愿意重写该插件，但也许有人知道更快/更简单的方法。

提前致谢！

更新：我通过生成逗号分隔的转换列表并将它们作为 .cycle 的 fx: 选项的值传递来满足我的要求插件。作为参考，我使用上面链接的常见问题解答页面来了解每张幻灯片的计时，以及“此页面显示如何在单个幻灯片上使用多种效果。”页面用于每张幻灯片的过渡。

Answer 1

我通过生成逗号分隔的转换列表并将它们作为 .cycle 插件的 fx: 选项的值传递来设法满足我的要求。作为参考，我使用上面链接的常见问题解答页面来了解每张幻灯片的计时，并且“此页面显示如何在单个幻灯片上使用多种效果。”页面，了解每张幻灯片的过渡效果。

Answer 2

现在，使用 Cycle2 插件 就容易多了。

例如（未经测试，但从 Cycle2 站点复制）：

<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！