0

这个例子

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

...似乎是我需要的，除了我的图像是 137x109（9 张图像）。他们需要在没有悬停或鼠标激活的情况下连续随机淡入和淡出。3 x 3 设置对我来说是理想的，所以我认为它只需要一些调整。我只在 Flash 中工作过，所以这对我来说是全新的……所以请温柔一点！

该网站是

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

如您所见，不理想...任何帮助将不胜感激！

问候莱斯

再次感谢 ：）

4

3 回答 3

0

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

不要使用淡入淡出的构建，因为它们将您的元素 css 设置为

display:none

在淡出动画结束时

于 2012-08-15T14:12:52.533 回答
0

将此代码保存为 *.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>
于 2012-08-16T12:49:18.783 回答
0

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

于 2012-08-15T13:52:51.967 回答