jQuery 随机淡入图像答案

【问题标题】：jQuery randomly fadeIn imagesjQuery 随机淡入图像
【发布时间】：2010-11-03 23:29:14
【问题描述】：

我有一个包含很多小图像的容器。

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

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

任何建议，非常感谢

【问题讨论】：

标签： javascript jquery image fade setinterval

【解决方案1】：

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

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

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

});

没有比这更简单的了，而且效果相同

【讨论】：

这似乎是最简单的解决方案，而且效果很好。

【解决方案2】：

试试这个

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

【讨论】：

你怎么能确定 1）所有数字最终都会显示（可见），2）知道所有数字都显示出来并停止尝试显示它们？
你可以创建一个选项数组并检查你的随机数，一旦它被使用，你就会从数组中删除它。

【解决方案3】：

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

【讨论】：

【解决方案4】：

不清楚（对我来说）你是想在半秒后开始淡入，还是在半秒后淡入。但是，在半秒后淡入淡出。如果你想这样做，只需忽略 setTimeout() 的东西

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

【讨论】：

【解决方案5】：

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

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

【讨论】：