javascript - Jquery cycle - 具有不同速度转换的幻灯片？

Question

我正在尝试为过渡效果制作具有不同速度值的淡入淡出幻灯片。

我不想更改超时或 Fx……我只想更改每个图像的速度转换值……这可能吗？

非常感谢您!!!

这是代码:

$('#s1').cycle({
    fx:     'fade',
    speed:  1000, //this is that I want to change for each img!!!
    timeout: 1700,
    next:   '#s1', 
});

<div id="s1" class="pics">
    <img src="img.jpg" width="450" height="300" />
    <img src="img.jpg" width="450" height="300" />
    <img src="img.jpg" width="450" height="300" />
</div>    

Answer 1

我使用以下属性来声明每张幻灯片的延迟:

timeoutFn: function (a) { return $(a).data('delay') * 1000; },
/.../

从幻灯片中读取“延迟”数据属性。

即您的图片标签需要按以下方式装饰:

<div id="s1" class="pics">
    <img src="img.jpg" width="450" height="300" data-delay="1" />
    <img src="img.jpg" width="450" height="300" data-delay="2" />
    <img src="img.jpg" width="450" height="300" data-delay="3" />
</div>

编辑: 我读你的问题太快了。我现在意识到您不想更改转换之间的延迟 - 而是更改转换的速度。

我自己还没有这样做，但一种可能有效的方法是以下列方式“之前”使用事件:

$('#s1').cycle({
    fx:     'fade',
    speed:  1000, //this is that I want to change for each img!!!
    timeout: 1700,
    next:   '#s1',
    before: function(e1, e2, opts) { opts.speed = parseInt($(e1).data('speed')); }
});