Question

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

$(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);
});

感谢所有大师

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

Answer 2

当您fadeOut()图片时，将其类或ID设置为“隐藏”或“fadedOut”。然后当你尝试fadeIn()另一个时，选择那些隐藏或褪色的东西，当你淡入它们时，清除他们的类或id'hidden'或'fadedOut'。

淡出，替换html并随机淡入淡出

2 个答案: