0

重複の可能性：
現在のページのJavascriptハードリフレッシュ

ページの読み込み時にランダムな画像を読み込むランダムな画像のJavaScriptがあります。「ランダム画像」というリンクをクリックすると、別のランダム画像をロードしたいのですが。ここにページがあります： http ：//www.heybrian.com/

現在のように、「ランダム画像」リンクは、新しいランダム画像を取り込むページ全体を更新するだけです。

編集：

以下は（切り捨てられた）javascriptコードです。ロードできるランダムな写真は約100枚ありますが、簡単にするために4枚しか含めていません。

images = new Array(99);

images[0] = "<div id='content_white_border' style='border: 1px white solid;'><div id='content_photo'><a href = 'travels/thailand/2004/ko_tao.php'><img src='lib/images/travels/thailand/2004/ko_tao_mango_bay.jpg' alt='' width='956' height='512' border='0' /></a></div></div><h4>Mango Bay (Taa Toh Bay), Ko Tao &mdash; April 9, 2004</h4>";

images[1] = "<div id='content_white_border' style='border: 1px white solid;'><div id='content_photo'><a href = 'travels/france'><img src='lib/images/travels/france/eiffel_close.jpg' alt='' width='956' height='512' border='0' /></a></div></div><h4>La Tour Eiffel, Paris, France &mdash; November 26, 2006</h4>";

images[2] = "<div id='content_white_border' style='border: 1px white solid;'><div id='content_photo'><a href = 'travels/china/2007/hangzhou.php'><img src='lib/images/travels/china/2007/hangzhou_gold_buddha.jpg' alt='' width='956' height='512' border='0' /></a></div></div><h4>Buddha image,  Língyǐn Temple <span lang='zh' xml:lang='zh'>灵隐寺&lt;/span>, Hángzhōu, China &mdash; August 2, 2007</h4>";

images[3] = "<div id='content_white_border' style='border: 1px white solid;'><div id='content_photo'><a href = 'travels/sri_lanka'><img src='lib/images/travels/sri_lanka/elephant_baby_wide.jpg' alt='' width='956' height='512' border='0' /></a></div></div><h4>Baby at the elephant breeding center, Kandy, Sri Lanka</h4>";

images[4] = "<div id='content_white_border' style='border: 1px white solid;'><div id='content_photo'><a href='travels/mongolia/'><img src='lib/images/travels/mongolia/man_baby_3_wide.jpg' alt='' width='956' height='512' border='0' /></a></div></div><h4>Mongol and his baby, Mongolia &mdash; July 2006</h4>";

index = Math.floor(Math.random() * images.length);
document.write(images[index]);
4

3 に答える 3

0

選択できるすべての画像がわかっている場合は、それらを配列に入れて、ボタンが完全にJavascriptにロードされたときにランダムに1つ選択できます。

var imgs = ["a.jpg", "b.jpg", "c.jpg"];

function pickImage()
{
    var idx = parseInt(Math.floor(Math.random() * imgs.length), 10);
    document.getElementById("random_image").src = imgs[idx];
}

画像の配列をJavascriptに入れたくない場合は、AJAXを使用してサーバーを呼び出す必要があります。次に、サーバーは表示する画像を決定し、ブラウザにパスを返します。

于 2013-01-04T07:04:58.483 に答える
0

イベントを使用して onclick、SRC 属性をランダムに変更します。

DRY を維持する: JS から反復的な泥だらけの HTML をすべて削除し、ドキュメントの body に配置して、ファイル名とその他の可変データ ( などhref) のみを配列に残します。オブジェクトの配列を使用できます。

var imgs = [
{name:"some_img.jpg",
 href:"dir\some.php"},
{name:"another_img.jpg",
 href:"direct\something.php"},
{name:"yet_antoher_img.jpg",
 href:"directory\some.php"}];

次に、JQuery を使用して、必要に応じてイメージ SRC とその他の属性およびコンテンツを置き換えます。単純化された構造:

 $("button").onclick(function(){
   index = Math.floor(Math.random() * imgs.length);
   current = imgs[index];
   $("a").attr("href",current.href);
   $("img").attr("src",current.name);
    });
于 2013-01-04T07:56:42.127 に答える