jQuery Slider - 如何为每个图像设置不同的时间？答案

【问题标题】：jQuery Slider - How to have different times for each image?jQuery Slider - 如何为每个图像设置不同的时间？
【发布时间】：2011-01-05 21:59:15
【问题描述】：

我试图让每张图片显示不同的时间，并认为我可以使用循环插件，但似乎无法让它工作，这里是所有代码

jQuery

  $(document).ready(function(){
     $('.slideshow ').cycle({ 
       fx:     'fade', 
       speed:  'fast',
       timeoutFn: function () { 
           return parseInt($(".slideshow img").attr('data-duration')) ;
       }   
     }); 
  });

HTML

   <div class="slideshow">
    <img data-duration="5400" src="beach1.jpg" width="200" height="200" />
    <img data-duration="50" src="beach2.jpg" width="200" height="200" />
    <img data-duration="50" src="beach3.jpg" width="200" height="200" />
    <img data-duration="50" src="beach4.jpg" width="200" height="200" />
    <img data-duration="50" src="beach5.jpg" width="200" height="200" />
 </div>

我做错了什么？

感谢您的帮助:)
利亚姆

【问题讨论】：

标签： jquery plugins cycle

【解决方案1】：

您对$(".slideshow img") 的调用匹配所有五张图片，attr() 将始终返回第一张图片的data-duration。

您需要改用传递给timeoutFn() 的参数：

timeoutFn: function(curr, next, opts, fwd) {
    return parseInt($(opts.elements[opts.currSlide]).attr("data-duration"))
        * 1000;
}

请注意，timeoutFn() 的返回值以毫秒表示，而不是秒。

【讨论】：

@Liam，确实，似乎传递给timeoutFn() 的第一个参数是动画元素的index，而不是元素本身。我更新的答案解决了这个问题。
仍然无法让它工作它只是冻结在第二张幻灯片上:(更新-liammann.com/testingtest
@Liam，你使用的插件很奇怪......传递给timeoutFn() 的第一个参数有时是一个数字，有时是一个元素。我最终忽略了它并改用opts.currSlide。请参阅我的更新答案。

【解决方案2】：

timeoutFn 回调传递了几个参数：当前幻灯片、下一张幻灯片、选项和前进标志。您可以更新您的 timeoutFn 函数以查看当前幻灯片：

timeoutFn: function(curr, next, options, forward) {
    return parseInt($(curr).attr('data-duration'));
}

参考：http://jquery.malsup.com/cycle/options.html

【讨论】：

【解决方案3】：

引用当前幻灯片元素的属性效果更好：


     $('.slideshow ').cycle({ 
       fx:     'fade', 
       speed:  'fast',
       timeoutFn: function (currSlideElement, nextSlideElement, options, forwardFlag) { 
           return parseInt($(currSlideElement).attr('data-duration'));
       }   
     });

【讨论】：