更改 div 张图片中的一张图片

Question

我正在尝试更改 div 中一张随机图片的图片 scr。这是我的代码：

setInterval(ChangeToBomb, 3000);

function ChangeToBomb() {

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

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

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

Answer 1

查看 nth-child 选择器

$('#depionnen img:nth-child(' + randomlyGeneratedNumber + ')').fadeOut(100, function(){
    $(this).attr('src', bombs[0]).fadeIn(100);
})

Answer 2

您可以生成从 0 到长度为 1 的图像的随机数。使用此变量按索引定位随机图像：

  var randomimgindex= (Math.random() * $('#depionnen img').length);
  $('#depionnen img:eq('+randomimgindex+')').fadeOut(100, function(){
    $(this).attr('src', bombs[0]).fadeIn(100);
  });

Answer 3

您可以生成一个介于 0 和图像的最后一个索引之间的随机数，并用它来随机选择图像。

var randomNumber = Math.floor(Math.random() * bombs.length);

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

Answer 4

我会使用 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>

更改 div 张图片中的一张图片

Change one single image in div of images

javascript

jquery

image

setinterval