2013-01-21 88 views
4

我目前正在使用jquery循環插件。我有3個不同的幻燈片,彼此相鄰並同時循環。我想要做的是先設置第一個幻燈片,然後是第二個,然後是第三個。無論如何,我可以用增量或超時來做到這一點嗎?jQuery循環插件交錯/增量

<div class="cycle" id="one"> 
    <img src="one.jpg" alt="" /> 
    <img src="two.jpg" alt="" /> 
    <img src="three.jpg" alt="" /> 
</div> 
<div class="cycle" id="two"> 
    <img src="two.jpg" alt="" /> 
    <img src="three.jpg" alt="" /> 
    <img src="one.jpg" alt="" /> 
</div> 
<div class="cycle" id="three"> 
    <img src="three.jpg" alt="" /> 
    <img src="one.jpg" alt="" /> 
    <img src="two.jpg" alt="" /> 
</div> 

$('.cycle').cycle({ 
    fx:'fade', 
    speed:1000 
}); 

回答

3
var timeout = 0; 

$(".cycle").each(function() { 
    var $this = $(this); 
    setTimeout(function() { 
     $this.cycle({ 
     fx: "fade", speed: 1000 
     }); 
    }, timeout); 

    timeout += 2000; 
}); 
1
var i = 1; 
var x = $(".cycle").length; 
var w = setInterval(function() { 
if(i==x) { 
window.clearInterval(w); 
} 
else { 
$(".cycle:nth-child('+i+')").cycle({ 
    fx:"fade", 
    speed:1000 
}); 
i++; 
} 
}, 3000);