Question

这个例子

http://jsfiddle.net/wCb93/1/

...似乎是我需要的，除了我的图像是137x109（9张图像）。它们需要连续随意淡入淡出，无需悬停或鼠标激活。 3 x 3设置对我来说非常理想，所以我认为只需要一些调整。我只是在闪光灯上工作，所以这对我来说是全新的...所以请保持温和！

该网站

http://www.incyteventures.com/index.html

你可以看到不理想......非常感谢任何帮助！

此致莱斯

再次感谢：）

Answer 1

使用jquery选择器（jQuery（）或$（）），你有一个像数组一样的对象，通过使用get（）方法，你可以选择该集合的特定对象。所以你要做的就是：用选择器捕获图像，从0到对象长度选择一个随机数，调用fadeToggle（需要jQueryUI）。然后将setInterval设置为该函数。注意：setInterval必须占用与fadeToggle相同或更多的时间，否则图像将不会完全消失。

Answer 2

我已经分叉了jsfiddle并添加了fadeIns。这是你想要的？ http://jsfiddle.net/flyingsausage/JBmks/

不要在渐变中使用构建，因为它们将元素css设置为

display:none

在fadeOut动画结束时

Answer 3

将此代码保存为* .js文件（我稍微修改了一下）：

$(function(){
    changeImg();
})

function changeImg(){
    var randomNumber = Math.floor(Math.random()*(9));
    var theImage = $('#container > img').eq(randomNumber);

    if (theImage.css("opacity")==0){
        theImage.delay(500).animate({
            opacity:1
        },250, function(){
            changeImg();
        });
    } else {
        theImage.delay(500).animate({
            opacity:0
        },250, function(){
            changeImg();
        });
    }
}

你应该看起来像这样：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>fancy_fade_outs</title>
<style type="text/css">
img {
    display: block;
    width: 137px;
    min-height: 109px;
    margin-right: 9px;
    margin-bottom: 9px;
    opacity:0;
    border: 0;
    float: left;
}

#container {
    width: 438px; /* =(image width + margin right)*3  */
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><!-- jquery on google-->
<script src="fadeScript.js"></script><!-- path to your script-->
</head>

<body>
<div id="container">
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" /><div style="clear: both;"></div>
</div>

</body>
</html>

使用jquery一次随机1个淡入淡出9个缩略图的图库，无需悬停

3 个答案: