隨機圖像的兩個位置相同的一組

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

對於你想要做什麼，我看不到它們存儲在陣列中的點，做複雜的東西，讓他們。

如果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（因爲不存在的圖像，你需要查看源代碼）

Answer 2

這裏有一個特殊的方法。

我在使用開始時通過識別所有我計劃的變量：

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

這可能在有些改善。例如，有可能的是，雖然目前正在oContainer2所示aImages[2]，可以在下一次重新應用左右。您可以檢查以確保您只選擇一個圖像，而不是當前在您的容器中顯示的圖像。

Answer 3

如果您的目的是可擴展的（例如，如果您不知道您將擁有多少圖片），我通常會推薦附加到DOM並隨機創建<div/>，並且還會循環以創建divs，所以你不需要手動創建它們。然而，如果不是這種情況下，使用您已經使用的模式，你可以做這樣的事情：

<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內的函數調用引用。沒有更多的細節，很難確切地知道你想要什麼，但希望這會給出一些想法。