jQuery随机图像推子

时间:2012-07-06 14:33:16

标签: javascript jquery

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

我有一个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);
});

});

1 个答案:

答案 0 :(得分: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);

});