jQuery随机淡入图像

Question

我有一个容器，里面有很多小图片。

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

我将不透明度设置为0.（不隐藏） 然后我想在半秒后显示（淡入淡出）随机图像。例如，5日，1日，55日......

任何建议，非常多

Answer 1

试试这个

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

Answer 2

使用数字模式为每个图像添加一个id，然后使用随机生成的id淡化图像，使用javascript中的math.random

function getImage(minim,maxim) {
    return "img" + Math.round(Math.random()*(maxim-minim)+minim);
}

Answer 3

我不清楚（对我来说）你是想在半秒钟后开始褪色，还是在半秒内淡出。但是，在 半秒后淡入。如果你想这样做，只需用setTimeout（）

忽略这些东西

您想要做的一般概述是：
在页面加载后创建一个函数，在半秒后调用（setTimeout）
该函数应该生成一个随机数，min为0，最大值为#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();
}

Answer 4

如果你想要淡入所有图像，那么就不需要使用所有随机的东西，只需要cicle并延迟一个随机数 在500ms和1秒之间。无论如何你必须放入隐藏功能。或者使用不透明度使用动画css。

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

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

});

你不会发现比这更简单的事情，并且效果相同

Answer 5

我会使用生成的随机数来创建图像的'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');
}