Question

我正在尝试使用图像更改div中一个随机图像的图像scr。这是我的代码：

setInterval(ChangeToBomb, 3000);

function ChangeToBomb() {

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

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

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

Answer 1

我会使用米林德解决方案的变体。而不是仅仅为了提取图像而构建选择器，因为我们已经拥有图像列表，只需从列表中抓取其中一个：

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>

Answer 2

查看nth-child选择器

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

Answer 3

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

{{1}}

Answer 4

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

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

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

更改图像div中的单个图像

4 个答案: