Question

我试图在页面上运行3个幻灯片，但速度/次数不同。我创造了一个可以在这里找到的小提琴...... http://jsfiddle.net/zq7XG/任何想法我怎么能让他们采取不同的行动？我真的需要在不同时间改变它们。

提前致谢！

$(document).ready(function(){$('.slideshow').cycle({fx:'fade'});});




<div class="slideshow">
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200"/>
</div>

<div class="slideshow">
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200"/>
</div>

<div class="slideshow">
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200"/>
</div>

Answer 1

为每个呼叫周期添加一个ID。

<div class="slideshow" id="slideshow-1">...</div>
<div class="slideshow" id="slideshow-2">...</div>
<div class="slideshow" id="slideshow-3">...</div>

$(document).ready(function() {
    $('#slideshow-1').cycle({
        fx: 'fade',
        timeout: 5000,
    });

    $('#slideshow-2').cycle({
        fx: 'fade',
        timeout: 9000,
    });

    ...

});

Answer 2

我的代码略有改动。

请查看我尝试过的更改如下;

JS Fiddle Example

希望有所帮助

jquery在一个页面上有3个幻灯片

2 个答案: