6

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

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

我将不透明度设置为 0。（不隐藏）然后我想在半秒后显示（淡入）随机图像。例如第 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

使用数字模式为每个图像添加一个 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

（对我来说）不清楚你是想在半秒后开始淡化，还是在半秒后淡入。但是，半秒后淡入淡出。如果你想这样做，只需忽略 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();
}
于 2009-06-18T12:09:17.717 回答
1

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

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

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

});

你不会发现没有比这更简单的了，而且效果相同

于 2012-02-16T10:03:48.223 回答
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 回答