在 Div 之间旋转图像

Question

我正在尝试在一些 div 中旋转一些图像。到目前为止，我的 jquery 技能有限。

<div id='pos-1'>
</div>
<div id='pos-2'>
</div>
<div id='pos-3'>
</div>


var image = new Array ();
  image[0] = "<img src='https://placehold.it/200/09f/fff.png'/></a>";
  image[1] = "<img src='https://placehold.it/200/000/fff.png'/></a>";
  image[2] = "<img src='https://placehold.it/200/22f/000.png'/></a>";
  image[3] = "<img src='https://placehold.it/200/32f/fff.png'/></a>";
  image[4] = "<img src='https://placehold.it/200/42f/fff.png'/></a>";

var link = new Array ();
    link[0] = "<a href='http://www.jquery.com'>";
    link[1] = "<a href='http://www.microsoft.com'>";
    link[2] = "<a href='http://www.yahoo.com'>";
    link[3] = "<a href='http://www.msn.com'>";
    link[4] = "<a href='http://www.stackoverflow.com'>";

var size = image.length;
var x = Math.floor(size*Math.random());
$('#pos-1').append(link[x]+image[x]);
$('#pos-2').append(link[x]+image[x]);
$('#pos-3').append(link[x]+image[x]);

演示：https://jsfiddle.net/y0hga2of/

这里的图片与链接相关联，因此一旦用户点击 div，他/她就会被带到该网址。例如：image0 与link0 相关联，image1 与link1 相关联，以此类推。

但是，使用此代码，所有 div 中都会显示相同的图像。我想要的是

• image0 和 link0 应该显示在 pos-1 中
• image1/link1 和 image2/link2 应该在 pos-2 中“旋转”
• image3/link3 和 image4/link4 应该在 pos-3 中旋转

目前我还想在 pos-1 中只显示一张图像。在稍后阶段，我也可以在 pos-1 中旋转两个图像。同样，我可能在 pos-2 中只显示一张图像。如何在我的代码中适应这种灵活性？

谢谢。

Answer 1

您对三个附加语句使用相同的随机x值，您需要每次重新计算x，如下所示：

var x = Math.floor(size*Math.random());
$('#pos-1').append(link[x]+image[x]);
x = Math.floor(size*Math.random());
$('#pos-2').append(link[x]+image[x]);
x = Math.floor(size*Math.random());
$('#pos-3').append(link[x]+image[x]);

查看更新后的fiddle

Answer 2

您可以根据需要尝试：

jsfiddle.net/y0hga2of/5/

$(function(){
var image = new Array ();
  image[0] = "<img src='https://placehold.it/200/09f/fff.png'/></a>";
  image[1] = "<img src='https://placehold.it/200/000/fff.png'/></a>";
  image[2] = "<img src='https://placehold.it/200/22f/000.png'/></a>";
  image[3] = "<img src='https://placehold.it/200/32f/fff.png'/></a>";
  image[4] = "<img src='https://placehold.it/200/42f/fff.png'/></a>";

var link = new Array ();
    link[0] = "<a href='http://www.jquery.com'>";
    link[1] = "<a href='http://www.microsoft.com'>";
    link[2] = "<a href='http://www.yahoo.com'>";
    link[3] = "<a href='http://www.msn.com'>";
    link[4] = "<a href='http://www.stackoverflow.com'>";

  var min = 0;
  var max = 1;
  var x = Math.floor(Math.random() * (max - min) + min);
  $('#pos-1').append(link[x]+image[x]);

  min=1;
  max=3;
  x = Math.floor(Math.random() * (max - min) + min);
  $('#pos-2').append(link[x]+image[x]);

  min=3;
  max=5;
  x = Math.floor(Math.random() * (max - min) + min);
  $('#pos-3').append(link[x]+image[x]);
});