jQuery隨機圖像推子

Question

我有一個標題區域被分成圖像的塊區域，這些圖像絕對位於塊內，並且都是不同的高度和寬度。

我有一個URL /隨機圖像？width = x & height = y & random = 34234它會生成隨機圖像以用於特定位置。

我希望這些圖像隨機淡出並更改爲另一個隨機圖像，或淡入點擊。我已經得到它的工作，除了「setTimeout」或「setInterval」只觸發一次。我需要它在無限循環中。

這裏是我的代碼，任何想法：

jQuery(document).ready(function ($) { 

$('#main-image img').live('click', function() {  
    var $image = $(this), 
    width = $image.width(), 
    height = $image.height(), 
    random = Math.random();   

    $('<img src="/random-image?width='+width+'&height='+height+'&random='+random+'" />').hide().load(function() { 
     $(this) 
     .appendTo($image.parentsUntil('div.columns')) 
     .fadeIn('slow', function() { 
      $image.remove(); 
     }); 

    });   
}); 

$('#main-image img').each(function() { 
    var $image = $(this), 
    randVal = Math.round(5000 + Math.random()*(30000 - 5000)) ; 

    setTimeout(function() { 
     console.log($image.attr('src')); 
     $image.trigger('click'); 
    },randVal); 
}); 

}); 

Answer 1

您需要在淡出結束時再次打電話給你的setTimeout函數。我能想到做到這一點的最簡單的方法是命名您所使用的功能，然後從兩個地方調用它，如下面的（完全未經測試）版本：

jQuery(document).ready(function ($) { 

var changeImage = function() { 
    var $image = $(this), 
    randVal = Math.round(5000 + Math.random()*(30000 - 5000)) ; 

    setTimeout(function() { 
     console.log($image.attr('src')); 
     $image.trigger('click'); 
    },randVal); 
}; 

$('#main-image img').live('click', function() {  
    var $image = $(this), 
    width = $image.width(), 
    height = $image.height(), 
    random = Math.random();   

    $('<img src="/random-image?width='+width+'&height='+height+'&random='+random+'" />').hide().load(function() { 
     var newImage = this; 
     $(this) 
     .appendTo($image.parentsUntil('div.columns')) 
     .fadeIn('slow', function() { 
      $image.remove(); 
      changeImage.call(newImage); 
     }); 

    });   
}); 

$('#main-image img').each(changeImage); 

});