N> 3個圖像，顯示3個，在它們上的單個循環每次衰減一次

我有例如9個圖像，從開始顯示3個圖像。我想讓它們逐漸淡入另一個圖像，例如：http://jsfiddle.net/linuxatico/C9Tw2/7/N> 3個圖像，顯示3個，在它們上的單個循環每次衰減一次

在這個版本中，我有3個循環調用，通過定時初始化進行分隔。我發現，在3個不同的週期中，時間越長，重疊衰落圖像的時間效應就越錯誤。我相信這可以通過一個單獨的Cycle動畫來解決，但我無法弄清楚如何做到這一點。你有解決方案嗎？

HTML：

<div class="container"> 
    <ul class="first"> 
     <li><img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" /></li> 
     <li><img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" /></li> 
     <li><img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" /></li> 
    </ul> 
    <ul class="second"> 
     <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00001.jpg" /></li> 
     <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00002.jpg" /></li> 
     <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00003.jpg" /></li> 
    </ul> 
    <ul class="third"> 
     <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00004.jpg" /></li> 
     <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00005.jpg" /></li> 
     <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00006.jpg" /></li> 
    </ul> 
</div>

JS：

jQuery('.first').cycle({ 
    fx:  'fade', 
    delay: -1000 
}); 
jQuery('.second').cycle({ 
    fx:  'fade', 
    delay: -2000 
}); 
jQuery('.third').cycle({ 
    fx:  'fade', 
    delay: -3000 
});

編輯：我這裏有一個略低的不同要求：3 transitions, pausetime between transitions

來源

2013-02-19 linuxatico

似乎是類似的問題在這裏http://stackoverflow.com/questions/13272792/jquery-cycle-running-sequence-of-multiple-rotators – gregjer 2013-02-19 13:35:52

啊，但問題仍對我沒有解決，你可以看到這裏：http://jsfiddle.net/linuxatico/C9Tw2/10/與3000和4000值 – linuxatico 2013-02-19 14:03:36

你可以添加一個回調到轉換結束。

jQuery('.first').cycle({ 
    fx:  'fade', 
    delay: -1000, 
    after: function(){change('.second')} 
}); 
jQuery('.second').cycle({ 
    fx:  'fade', 
    timeout: 0, 
    after: function(){change('.third')} 
}); 
jQuery('.third').cycle({ 
    fx:  'fade', 
    timeout: 0, 
}); 

function change(what) 
{ 
    jQuery(what).cycle("next"); 
}

的jsfiddle：http://jsfiddle.net/c7UXM/

來源

2013-02-19 15:32:12 strah

無法打開http://jsfiddle.net/c7UXM/ – linuxatico 2013-02-19 16:08:12

無法打開jfiddle.net在所有接縫處都存在問題。 – strah 2013-02-19 16:10:35

這個解決方案沒有一個固定的延遲，從第一個到第二個到第三個到第一個ecc ...，動畫必須是流暢的，沒有用戶看到任何區別 – linuxatico 2013-02-22 09:17:55

N> 3個圖像，顯示3個，在它們上的單個循環每次衰減一次

回答

相關問題