Divs之间的旋转图像

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，他/她就会被带到该url。image0与link0有关，image1与link1联系在一起，等等。

然而，对于这个代码，相同的图像显示在所有的div中。我想要的是

• image0和link0应该显示在pos-1中。
• 图像1/link2 1和image1 2/link2 2应该在pos-2中“旋转”。
• 图像3/link3 3和image3 4/link3 4应在pos-3中旋转。

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

谢谢。

Answer 1

您可以根据您的需要尝试此方法：

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]);
});

Answer 2

对于三个附加语句，您将使用相同的随机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]);

请参阅更新后的小提琴