ランダムな画像2つの場所同じセット

Question

基本的に私が探しているのはランダムな画像のJavaScriptコードですが、画像は2つの異なるdivにありますが、ランダムな画像が同じ配列から来るようにしたいと思います。

私は、私はこのように感じるので、私はもう依頼する必要はありませんシンプルである必要があり、この夏JSクラスを取ることを計画...

現在、私はちょうど異なる2内の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 WITHIN

レンダリングCODE

あなたがやりたいと思っているものについては

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

REFRESHED

<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にGE（画像が存在しないため、あなたがソースコードを参照する必要があります）

Answer 2

ここに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); 

我々は両方のイメージがとても限り、我々は同じ値を選択していると、同じことをしたくない、のは、2番目のインデックスのための別のインデックス値を選択してみましょう。

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に表示されている可能性がありますが、次回以降に再適用される可能性があります。現在コンテナに表示されているイメージ以外のイメージのみを選択していることを確認することができます。

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内の関数呼び出しで参照できるようにします。細かいことなくあなたが望むものを正確に知ることは難しいですが、うまくいけば、これはいくつかのアイデアを与えるでしょう。