1

つまり、基本的に私が探しているのは、ランダムな画像の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内のレンダリングされたコード

<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

これが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 );
}

効果を何度も確認するために、1秒ごとに実行される間隔内に格納された無名関数内でロジックを実行しています。もちろん、名前付き関数にまとめて1回呼び出すこともできます。

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

于 2012-04-23T01:26:02.637 に答える
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しましたrandimage1image0+10-9

jsFiddleデモ（画像が存在しないため、ソースコードを確認する必要があります）

于 2012-04-23T01:08:26.903 に答える
0

拡張可能にすることが目的の場合（たとえば、画像の数がわからない場合）、通常は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内の関数呼び出しで参照できるようにします。詳細がなければ、何が欲しいのかを正確に知ることは困難ですが、これによっていくつかのアイデアが得られることを願っています。

于 2012-04-23T01:26:04.180 に答える