javascript - 更改图像 div 中的一张图像

Question

我正在尝试更改带有图像的 div 中的一个随机图像的图像 scr。这是我的代码:

setInterval(ChangeToBomb, 3000);

function ChangeToBomb() {

    $('#depionnen img').fadeOut(100, function(){
        $(this).attr('src', bombs[0]).fadeIn(100);
    })
}

此时 div 元素中的每个图像都在发生变化。

有人知道如何对单个随机图像执行此操作吗？

Answer 1

我会使用 Milind 解决方案的变体。由于我们已经拥有图像列表，因此不必构建一个选择器只是为了提取图像，只需从列表中获取其中一个即可:

var images = $('#depionnen img');
var randomimgindex = Math.floor(Math.random() * images.length);

$(images[randomimgindex]).fadeOut(100, function(){
  $(images[randomimgindex]).attr('src', bombs[0]).fadeIn(100);
});

var bombs = [ "http://placehold.it/300x300" ];

var images = $('#depionnen img');
var randomimgindex= Math.floor(Math.random() * (images.length));

$(images[randomimgindex]).fadeOut(100, function(){
  $(images[randomimgindex]).attr('src', bombs[0]).fadeIn(100);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="depionnen">
  <img src="http://placehold.it/200x200" alt="" />
  <img src="http://placehold.it/200x200" alt="" />
  <img src="http://placehold.it/200x200" alt="" />
  <img src="http://placehold.it/200x200" alt="" />
  <img src="http://placehold.it/200x200" alt="" />
  <img src="http://placehold.it/200x200" alt="" />
  <img src="http://placehold.it/200x200" alt="" />
</div>