javascript - 随机图像两个位置相同的集合

Question

所以基本上我正在寻找的是如何获得随机图像 javascript 代码，但图像位于两个不同的 div 中，但我希望随机图像来自同一个数组。

我打算今年夏天去上一门JS课，所以我不用再问了，因为我觉得这应该很简单......

目前我只是在两个不同的位置使用来自 javascript 工具包的代码:

<script language="JavaScript">
<!--

/*
Random Image Script- By JavaScript Kit (http://www.javascriptkit.com) 
Over 400+ free JavaScripts here!
Keep this notice intact please
*/

function random_imglink(){
    var myimages=new Array()
    //specify random images below. You can have as many as you wish
    myimages[1]="image1.gif"
    myimages[2]="image2.gif"
    myimages[3]="image3.gif"
    myimages[4]="image4.gif"
    myimages[5]="image5.gif"
    myimages[6]="image6.gif"

    var ry=Math.floor(Math.random()*myimages.length)
    if (ry==0)ry=1
    document.write('<img src="'+myimages[ry]+'" border=0>')
}
random_imglink()
//-->
</script>

但我希望达到的是:

<script language="JavaScript">
<!--

/*
Random Image Script- By JavaScript Kit (http://www.javascriptkit.com) 
Over 400+ free JavaScripts here!
Keep this notice intact please
*/

function random_imglink(){
    var myimages=new Array()
    //specify random images below. You can have as many as you wish
    myimages[1]="image1.gif"
    myimages2[1]="image1a.gif"
    myimages[2]="image2.gif"
    myimages2[2]="image2a.gif"

    var ry=Math.floor(Math.random()*myimages.length)
    if (ry==0) ry=1
    document.write('<img src="'+myimages[ry]+'" border=0>')
}
random_imglink()
//-->
</script>

DIVS 中的渲染代码

<div class="one"><img src="img1.gif"></div>
<div class="two"><img src="img1a.gif"></div>

刷新

<div class="one"><img src="img2.gif"></div>
<div class="two"><img src="img2a.gif"></div>

Answer 1

这是一种特殊的方法。

我首先确定我计划使用的所有变量:

var rIndex1, rIndex2, 
    oContainer1, oContainer2, 
    aImages;

现在我将初始引用分配给 DOM 容器，并填充我的图像数组:

oContainer1 = document.getElementById("left");
oContainer2 = document.getElementById("right");
aImages = ['http://placekitten.com/200/200','http://placekitten.com/201/201',
           'http://placekitten.com/202/202','http://placekitten.com/203/203',
           'http://placekitten.com/204/204','http://placekitten.com/205/205'];

因为我会多次生成随机索引值，所以我为此逻辑创建了一个简单的函数:

function rIndex ( iMax ) {
  return Math.floor( Math.random() * iMax );
}

为了反复查看效果，我在一个匿名函数中运行逻辑，存储在每秒运行的时间间隔内。当然，您可以将它包装在一个命名函数中，只调用一次。

setInterval(function(){

为我的索引变量设置初始随机值。

  rIndex1 = rIndex( aImages.length );
  rIndex2 = rIndex( aImages.length );

我们不希望两个图像相同，所以只要我们选择了相同的值，我们就可以为第二个索引选择另一个索引值。

  while ( rIndex2 == rIndex1 ) rIndex2 = rIndex( aImages.length );

最后，我用新的图像元素覆盖了容器的 innerHTML 属性。

  oContainer1.innerHTML = '<img src="%s" />'.replace( /%s/, aImages[ rIndex1 ] );
  oContainer2.innerHTML = '<img src="%s" />'.replace( /%s/, aImages[ rIndex2 ] );

}, 1000);

演示:http://jsbin.com/ubuxoj/edit#javascript,html

这可以改进一点。例如，当 aImages[2] 当前显示在 oContainer2 中时，它可能会在下一次重新应用。您可以检查以确保您只选择一个图像，而不是当前显示在容器中的图像。