0

画像のブロック領域に分割されたヘッダー領域があります。これらの画像はブロック内に完全に配置され、すべて異なる高さと幅です。

特定の場所で使用するランダムな画像を生成するURL/random-image？width = x＆height = y＆random=34234があります。

これらの画像をランダムにフェードアウトして別のランダムな画像に変更するか、クリックするとフェードアウトします。「setTimeout」または「setInterval」が1回だけトリガーされることを除いて、動作しています。無限ループになっている必要があります。

これが私のコード、アイデアです：

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

});
4

1 に答える 1

1

フェードの最後に、setTimeout関数を再度呼び出す必要があります。これを行うために私が考える最も簡単な方法は、使用している関数に名前を付けてから、次の（完全にテストされていない）バージョンのように2か所から呼び出すことです。

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

});
于 2012-07-06T14:52:26.717 に答える