0

すべてのページのリロード時に表示される画像をランダムに変更するために使用されるこのコードがあります。私は JavaScript の経験があまりないので、誰かがこのコードでランダムにではなく、リロード時に画像を変更するのを手伝ってもらえますか?

コードは次のとおりです。

function showImage(){
    var theImages = new Array()

    theImages[0] = '100.jpg'
    theImages[1] = '200.jpg'
    theImages[2] = '300.jpg'
    theImages[3] = '400.jpg'
    theImages[4] = '500.png'

    var j = 0
    var p = theImages.length;

    var preBuffer = new Array()
    for (i = 0; i < p; i++){
       preBuffer[i] = new Image()
       preBuffer[i].src = theImages[i]
    }

    var whichImage = Math.round(Math.random()*(p-1));
    function showImage(){
    document.write('<img src="'+theImages[whichImage]+'">');
}

そして、これを使用して本文の画像を呼び出すだけです。

showImage();
4

3 に答える 3

2

This will show them in order and repeat at the beginning once they are all the way through.

(function(){
    var list = [
            "100.jpg",
            "200.jpg",
            "300.jpg",
            "400.jpg",
            "500.jpg"
        ],i = localStorage.image || 0;
    document.write('<img src="'+list[i]+'"/>');
    i++;
    i%=list.length;
    localStorage.image = i;
})();

Here's a jsfiddle: http://jsfiddle.net/J9gAD/

Nobody (jsbin, jsfiddle, codepen) seems to support document.write, understandably, so the fiddle shows how to change the src value of an img tag instead of writing the element insitu.

To do this with HTML content (in a div)... http://jsfiddle.net/J9gAD/2/

于 2013-04-28T05:51:41.850 に答える
0

ページのリロード時にそれらを順番に表示する場合 (これは少し奇妙ですが、問題ありません)、URL にインデックスを渡す必要があるため、次のようになります。

function showImage(){
    var theImages = new Array()

    theImages[0] = '100.jpg'
    theImages[1] = '200.jpg'
    theImages[2] = '300.jpg'
    theImages[3] = '400.jpg'
    theImages[4] = '500.png'

    var j = 0
    var p = theImages.length;

    var preBuffer = new Array()
    for (i = 0; i < p; i++){
       preBuffer[i] = new Image()
       preBuffer[i].src = theImages[i]
    }

    var index = location.hash || 0;
    if (index >= p) index = 0;

    var img = document.createElement('img'); 
    img.src = theImages[index];

    //replace document.body here with a reference to where you want the image to go
    document.body.appendChild(img); 
    location.hash = index++;
}

他の目的で location.hash を使用している場合は、手動で解析する必要がありますが、それほど難しくありません。

于 2013-04-28T05:33:45.373 に答える