Javascript jQuery随机图像推子

我有一个标题区域，它被划分为图像块区域，这些图像绝对位于块内，并且高度和宽度都不同

我有一个URL/random image？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);
});

});

jQuery（文档）.ready（函数（$）{
$（“#主图像img”）.live（'click'，function（）{
var$image=$（此），
宽度=$image.width（），
高度=$image.height（），
random=数学.random（）；
$（''）.hide（）.load（函数（）{
$（本）
.appendTo（$image.parentsUntil（'div.columns'））
.fadeIn（'slow'，function（）{
$image.remove（）；
});
});        
});
$（'#主图像img'）。每个（函数（）{
var$image=$（此），
randVal=Math.round（5000+Math.random（）*（30000-5000））；
setTimeout（函数（）{
log（$image.attr（'src'））；
$image.trigger（'click'）；
}，兰德瓦尔）；
});
});

淡入淡出结束时，需要再次调用setTimeout函数。我能想到的最简单的方法是命名您正在使用的函数，然后从两个位置调用它，如以下（完全未测试）版本：

jQuery（文档）.ready（函数（$）{
var changeImage=函数（）{
var$image=$（此），
randVal=Math.round（5000+Math.random（）*（30000-5000））；
setTimeout（函数（）{
log（$image.attr（'src'））；
$image.trigger（'click'）；
}，兰德瓦尔）；
};
$（“#主图像img”）.live（'click'，function（）{
var$image=$（此），
宽度=$image.width（），
高度=$image.height（），
random=数学.random（）；
$（''）.hide（）.load（函数（）{
var newImage=this；
$（本）
.appendTo（$image.parentsUntil（'div.columns'））
.fadeIn（'slow'，function（）{
$image.remove（）；
changeImage.call（newImage）；
});
});        
});
$（#主图像img'）。每个（更改图像）；
});

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);

});