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中的RENDERED代码

<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容器的初始引用，以及填充我的images阵列：

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时，可能会在下一次重新应用时显示{{1}}。您可以检查以确保只选择当前正在容器中显示的图像以外的图像。

Answer 2

对于你想要做的事情，我没有看到将它们存储在数组上并执行复杂的操作来获取它们的意义。

如果URL路径相同，则无需从数组中选择它们：

function refreshImages() {
    var max = 10;
    var rand = (Math.floor(Math.random() * max) + 1); //1-10
    var src1 = "http://example.com/image" + rand + ".gif";
    var src2 = "http://example.com/image" + rand + "a.gif";

    document.getElementById("div1").innerHTML = "<img src='" + src1 + "' />";
    document.getElementById("div2").innerHTML = "<img src='" + src2 + "' />";
}

window.onload = function() {//need to wait until the divs are loaded
    refreshImages();
}

并在您的HTML中：

<div id="div1"></div>
<div id="div2"></div>

注意：我已将+1添加到rand，因为在您的示例中，您是从image1开始的，如果您希望从{{1}开始}，只需删除image0，可能性范围将更改为+1

jsFiddle demo（因为图片不存在，您需要查看源代码）

Answer 3

如果你的目的是可扩展的（例如，如果你不知道你将拥有多少图像），我通常会建议附加到DOM并随机创建<div/>，并且还要循环创建div，这样您就不需要手动创建它们。但是，如果不是这种情况，通过使用您使用的模式，您可以执行以下操作：

<script>
var random = Math.random();
function random_imglink(arr){
    var ry = Math.floor(random*arr.length);
    document.write(
        '<img src="'+arr[ry]+'" border=0>'
    );
}  
var myimages = [
       "image1.gif", "image2.gif"
      ],
        myimagesA = [
       "image1a.gif", "image2a.gif"
      ];
</script>
<div class="one"><script>random_imglink(myimages);</script></div>
<div class="two"><script>random_imglink(myimagesA);</script></div>

我们首先创建一个随机数，我们会在此页面加载的整个生命周期中重复使用该数字。然后我们定义写入函数，然后使我们的2个数组可用，这样它们就可以被div中的函数调用引用。没有更多细节，很难确切地知道你想要什么，但希望这会给出一些想法。

随机图像两个位置相同的设置

3 个答案: