指定div上的随机图像

Question

我的要求：我有3组图像 - 大图像，垂直图像，矩形图像。刷新页面时，在显示的布局中，我想显示同一组的随机图像。

我的问题是，只有第一个大的垂直矩形角度div在每次刷新时随机显示图像。其他所有图像显示与之前相同。

HTML代码：

<div class="largebox">            
  <a href="">             
    <img id="largeimg" src="" class="largeimage">
  </a>          
</div>

Jquery代码：

  <script language="javascript">
      // random number between 1 and 100
      var numRand = Math.floor(Math.random()*13);
      document.getElementById("largeimg").src = "img/IMG_"+numRand+".jpg";
    </script>

Answer 1

修改

假设您想要显示唯一的图像，请调用

var numRand = Math.floor(Math.random()*13);

循环内部的

可能会产生重复值，因此建议首先创建一个随机值数组

----

我立即想到这可能是如何工作的，你需要一个带有随机值的数组（1-100），以及一个带有图像元素的数组，然后你循环通过数组并将随机数组值分配给图像元素

所以在页面加载时创建一个数组[1,2,3,4,5 ... 100]（带循环） 和图像元素数组

然后使用shuffle javascript array values

对值进行随机播放

取一个带随机数的数组

带有图像元素的b =数组（document.getElementsByClassName（“largeimage”））

for (var i = 0; i < a.length; i++) {

b[i].src = "img/IMG_"+a[i]+".jpg";

}

我希望它有所帮助，我没有模拟和测试这个

Answer 2

让我们将 HTML 视为

<div class="largebox">            
  <a href="">             
    <img id="largeimg1" src="" class="largeimage">
  </a>          
</div>

<div class="largebox">            
  <a href="">             
    <img id="largeimg2" src="" class="largeimage">
  </a>          
</div>

然后您的 JS 代码应该看起来像

var count = $('.largebox').length;

for(var i = 1; i <= count; i++)
{
    var numRand = Math.floor(Math.random()*13);
    var src1 = "img/IMG_"+numRand+".jpg";
    $('#largeimg'+i).attr("src", src1);
}

这是考虑课程largebox，largeimage和ids largeimg1，largeimg2仅用于大型图片。

您可以按照垂直图像和矩形图像的类似步骤进行操作。

希望能帮到你！