3次转换，转换之间pausetime

淡出1°图像 - >淡入1°图像 - > WAIT 2秒 - >淡出2°图像 - >淡入2°图像 - > WAIT 2秒 - >淡出3°图像 - >淡入3°图像 - > WAIT 2秒 - >淡出1°图像......

下面的代码：

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

JS：

var numberOfGroups = 3; 
var arrayOfArray = new Array(numberOfGroups); 
for(var i = 0; i < numberOfGroups; i++) 
{ 
    arrayOfArray[i] = new Array(); 
} 
var imagesElements = $('.container').children(); 
imagesElements.each(function(localIndex){ 
    //partiziono le immagini in insiemi in base all'ordine in cui le trova in partenza 
    arrayOfArray[localIndex % numberOfGroups].push(imagesElements[localIndex]); 
}); 
$('.container').empty(); 
for(var j = 0; j < arrayOfArray.length; j++) 
{ 
    //crea un nuovo div contenitore contenente le immagini come sono nell'array 2-dimensioni creato 
    var newDivContainer = document.createElement('div'); 
    newDivContainer.setAttribute('id', 'block_'+j); 
    for(var k = 0; k < arrayOfArray[j].length; k++) 
    { 
     newDivContainer.appendChild(arrayOfArray[j][k]); 
    } 

    $('.container').append(newDivContainer); 
} 

var newGroups = $('.container').children(); 
newGroups.each(function(thisIndex){ 
    $(newGroups[thisIndex]).cycle({ 
     fx:  'fade', 
     delay: 2000, 
     speed: 2000, 
     //continuous: 1, 
     timeout: 2000*numberOfGroups, 
     //sync: 0, 
     after: function(){ 
      var x = '#block_'+((thisIndex+1) % numberOfGroups); 
      change(x); 
      //window.setTimeout(change, 4000, x); 
     } 
    }); 
}); 

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

JSFIDDLE：http://jsfiddle.net/linuxatico/5e7X7/

来源

2013-02-25 linuxatico

请改变你的意见代码为英文。 – 2013-02-28 17:12:52

您真正需要做的就是适当设置延迟和超时选项。您可以使用每个组的索引来增加初始延迟选项，然后从中减去总动画时间，以便立即开始动画。例如：

var animationDelay = 4000*numberOfGroups - 2000; 
$("#test").cycle({ 
    delay: (4000 * thisIndex) - animationDelay, 
    speed: 2000, 
    timeout: animationDelay 
});

更新了你的小提琴，应该是你在找什么：http://jsfiddle.net/5e7X7/3/

来源

2013-02-28 18:06:40

谢谢，这就是我一直在寻找的。 – linuxatico 2013-03-07 14:16:24

3次转换，转换之间pausetime

回答

相关问题