1

我为我的在线用户图像创建了效果，但是这个脚本有一些问题。我有 9 张图片。隐藏了 3 张图像。当一张随机图像淡出时，我想用其中一张隐藏图像替换它。我不想在前 6 张图片中看到相同的图片。

http://seninsayfan.net/user.html

$(document).ready(function() {
setInterval(function() {
 var pic = 1 + Math.floor(Math.random() * 6);
  var picture = 1 + Math.floor(Math.random() * 9);
$(".image-" + pic).each(function() {
$(this).fadeOut(500, function() {
     $(this).html($(".image-" + picture).html());
    });
$(this).fadeIn(500);
});
}, 1000);
});

感谢所有大师

4

2 回答 2

1

我已经对您的代码进行了一些更改，您可以在http://jsfiddle.net/24Qat/22/看到一个实时示例

我设置了一组图像：

var images = {};
images[0] = "http://seninsayfan.net/ext/avatar/img1.jpg";
images[1] = "http://seninsayfan.net/ext/avatar/img2.png";
images[2] = "http://seninsayfan.net/ext/avatar/img4.jpg";
images[3] = "http://seninsayfan.net/ext/avatar/image1.jpg";
images[4] = "http://seninsayfan.net/ext/avatar/image2.gif";
images[5] = "http://seninsayfan.net/ext/avatar/pic1.gif";
images[6] = "http://seninsayfan.net/ext/avatar/pic2.jpg";
images[7] = "http://seninsayfan.net/ext/avatar/pic3.jpg";
images[8] = "http://seninsayfan.net/ext/avatar/pic4.gif";

我保存图像索引：

var shown = [0,1,2,3,4,5];
var hidden = [6,7,8];

比我使用选择源和目标来进行交换：

$(document).ready(function() {
    setInterval(function() {
        // choose target index
        var old_pic =  Math.floor(Math.random() * 6);
        // choose source index
        var new_pic = Math.floor(Math.random() * 3);
        $(".image-" + old_pic).fadeOut(500, function() {
            $(this).find('img').attr("src", images[hidden[new_pic]]);
            var temp = shown[old_pic];
            shown[old_pic] = hidden[new_pic];
            hidden[new_pic] = temp;
        }).fadeIn(500);
    }, 1000);
});

请注意，对于更精简的代码，我已将索引更改为从 0 开始。此外，我已删除最后 3 个图像（只需要 6 个容器），因此 html 应为：

<div class="image image-0" ><img src="http://seninsayfan.net/ext/avatar/img1.jpg"/></div>
<div class="image image-1" ><img src="http://seninsayfan.net/ext/avatar/img2.png"/></div>
<div class="image image-2" ><img src="http://seninsayfan.net/ext/avatar/img4.jpg"/></div>
<div class="image image-3" ><img src="http://seninsayfan.net/ext/avatar/image1.jpg"/></div>
<div class="image image-4" ><img src="http://seninsayfan.net/ext/avatar/image2.gif"/></div>
<div class="image image-5" ><img src="http://seninsayfan.net/ext/avatar/pic1.gif"/></div>
于 2013-01-06T13:32:56.757 回答
0

当您fadeOut()将图像设置为“隐藏”或“淡出”时，它的类或 ID。然后，当您尝试fadeIn()另一个时，从那些 hidden 或 fadedOut 中选择，当您将它们淡入时，清除它们的类或 id 'hidden' 或 'fadedOut'。

于 2013-01-06T12:25:52.343 回答