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

发布于 2024-10-10 09:32:58 字数 866 浏览 7 评论 0原文

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

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>

我做错了什么？

感谢您的帮助:)
利亚姆

原文

I am trying to get each image to have a different amount of time shown and thought I could use the cycle plugin but cant seem to get it to work, here all the code

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>

what am I doing wrong?

Thanks for any help :)
Liam

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

相权↑美人 2024-10-17 09:32:58

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

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

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

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

Your call to $(".slideshow img") matches all five images, and attr() will always return the data-duration of the first one.

You'll need to use the arguments passed to timeoutFn() instead:

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

Note that the return value of timeoutFn() is expressed in milliseconds, not seconds.

回复收藏 0 原文

冷…雨湿花 2024-10-17 09:32:58

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

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

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

The timeoutFn callback is passed several arguments: current slide, next slide, options, and a forward flag. You can update your timeoutFn function to look at the current slide:

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

Reference: http://jquery.malsup.com/cycle/options.html

回复收藏 0 原文

丶视觉 2024-10-17 09:32:58

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


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

Referrer to the attributes of the current slide element works better:


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

回复收藏 0 原文

~没有更多了~