Question

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

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

我做错了什么？

感谢您的帮助:) 利安

Answer 1

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

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

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

请注意，timeoutFn()的返回值以毫秒为单位，而不是秒。

Answer 2

timeoutFn回调传递了几个参数：当前幻灯片，下一张幻灯片，选项和转发标志。您可以更新timeoutFn功能以查看当前幻灯片：

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

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

Answer 3

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


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

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

3 个答案: