6

小さな画像がたくさん入ったコンテナがあります。

<div id="container">
   <img src="1.jpg" />
   <img src="2.jpg" />
   <img src="3.jpg" />
   ...
   <img src="100.jpg" />
</div>

不透明度を 0 に設定します (非表示ではありません) 次に、0.5 秒後にランダムな画像を表示 (フェードイン) します。たとえば、5 番目、1 番目、55 番目 ...

任意の提案、どうもありがとう

4

5 に答える 5

4

これを試して

<script type="text/javascript">

//generate random number
var randomnumber=Math.floor(Math.random()*$("#container").children().length);
$(function() {
    //hide all the images (if not already done)
    $("#container > img").hide();

    //set timeout for image to appear (set at 500ms)
    setTimeout(function(){
       //fade in the random index of the image collection
       $("#container > img:eq(" + randomnumber + ")").fadeIn();
    }, 500);       
});
</script>
于 2009-06-18T12:09:24.567 に答える
1

代わりにすべての画像をフェードインしたい場合は、すべてのランダムなものを使用する必要はありません.500ミリ秒から1秒の間の乱数を循環させて遅延させるだけです. とにかく非表示機能を配置する必要があります。または、不透明度を使用して animate css を使用します。

$('#container img').each(function(index) {

   $(this).delay( Math.random()*500+500 ).fadeIn();

});

これほど単純なものは他になく、同じ効果があります

于 2012-02-16T10:03:48.223 に答える
1

数字のパターンで各画像にIDを付けてから、javascriptのmath.randomを使用して、ランダムに生成されたIDで画像をフェードします

function getImage(minim,maxim) {
    return "img" + Math.round(Math.random()*(maxim-minim)+minim);
}
于 2009-06-18T12:09:11.507 に答える
1

0.5 秒後にフェードを開始するか、0.5 秒でフェードインするかは (私には) 明確ではありません。ただし、 0.5 秒後にフェードインします。それ以外の方法でやりたい場合は、setTimeout() を無視してください。

あなたがしたいことの一般的な概要は次のとおりです:
ページが読み込まれたときに0.5秒後に呼び出される関数を作成します(setTimeout)
。 #container 要素の子から 1 を引いた値 #container
の子を、乱数によって提供されるインデックスでフェードします。

Pusdoコード（jQueryで何かをやったのは久しぶりです。それについてはJavascriptです）

function onDocumentReady(){
    setTimeout(500, "fadeInRandom()");
}

function fadeInRandom(){    
    var numElements = $("#container").children().length;
    var randomElem = Math.random() * (numElements-1);
    $("#container").children()[randomElem].fadeIn();
}
于 2009-06-18T12:09:17.717 に答える
0

生成された乱数を使用して画像の 'src' 属性を作成し、それに応じて jQuery セレクターを構築します。

setInterval ( showRandomImage, 500 );

function showRandomImage()
{
    var randNo = Math.floor(Math.random() * 101);
    $("#container > img[src=" + randNo + "'.jpg']")
                   .animate({opacity: 0}, 500).fadeIn('slow');
}
于 2009-06-18T12:21:53.917 に答える