1

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

我计划今年夏天上JS课，所以我不必再问了，因为我觉得这应该很简单......

目前我只是在两个不同的位置使用来自 javascript kit 的代码：

<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>
4

3 回答 3

2

这是一种特殊的方法。

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

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

于 2012-04-23T01:26:02.637 回答
0

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

<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 中的函数调用引用。如果没有更多细节，很难确切地知道你想要什么，但希望这会给你一些想法。

于 2012-04-23T01:26:04.180 回答
0

对于您想要做的事情，我看不出将它们存储在数组中并做复杂的事情来获取它们的意义。

如果 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，如果您希望从 开始image0，只需删除+1并且可能性范围将更改为0-9

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

于 2012-04-23T01:08:26.903 回答