2013-08-02 90 views
0

我有一個簡單的jQuery幻燈片。我需要知道如何單獨改變的間隔時間爲每個圖像設置不同時間的每個圖像的間隔

我只想要第一個圖像是「9000」和他們的其餘部分是「3000」

<script> 
$(function(){ 
$('.fadein img:gt(0)').hide(); 
setInterval(function(){$('.fadein :first-child').fadeOut(2500).next('img').fadeIn(2500).end().appendTo('.fadein');}, 9000);}); 
</script> 

<div class="fadein" > 
<img src="1.jpg"> 
<img src="2.jpg"> 
<img src="3.jpg"> 
<img src="4.jpg"></div> 
+0

你確定了一個解決方案? – Sharlike

回答

2

只需設置超時爲9000,然後設置3000的間隔:

$(function(){ 
    function fade() { 
     $('.fadein :first-child').fadeOut(2500).next('img').fadeIn(2500).end().appendTo('.fadein'); 
    } 
    setTimeout(function() { 
     fade(); 
     setInterval(fade, 3000); 
    }, 9000); 
}); 
+0

您的超時時間爲3000 – Sharlike

+0

是的,修正了錯字。 – kevhender

+0

這對我不起作用,它在第一張幻燈片上暫停很長時間,然後在此之後淡入淡出,我需要它在第一幀上等待9秒,然後在第二幀上等待3秒,然後在第一幀上再次重複9和第二幀3秒, – user2405912

1

這可能是你要找的。它至少會給你一些玩的東西。

http://jsfiddle.net/BjornJohnson/42b8X/

您可以設置將使用該腳本用來設置的setTimeout延遲你想要的數據屬性的持續時間。

像:

<div id="x"> 
    <img class="active" data-timeout="3000" src="https://si0.twimg.com/profile_images/2644394397/748dd7e11df8dbb93f0fcf2abc141526.png" /> 
    <img data-timeout="1500" src="https://si0.twimg.com/profile_images/3379531545/ce1eed2263515e4a173dffc815e1a6fc.jpeg" /> 
    <img data-timeout="5000" src="https://si0.twimg.com/profile_images/3632836331/6e3f4995bd41d49b724e13e694eb1a2d.jpeg" /> 
    <img data-timeout="2000" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQb09ZMKsDuY5lko2JNEfnXb8_8HTfedS9Uuk_7fdcTGoH5Ps-Xxg" /> 
</div>