クリックするとランダムな画像が表示されます

Question

ランダムに画像をランダムに表示する方法についてはコードを用意していますが、ボタンをクリックしたときと同じように表示されます。 JavaScriptを使用して

<? 
$imglist=''; 
//$img_folder is the variable that holds the path to the banner images. Mine is images/tutorials/ 
// see that you don't forget about the "/" at the end 
$img_folder = "images/tutorials/"; 

mt_srand((double)microtime()*1000); 

//use the directory class 
$imgs = dir($img_folder); 

//read all files from the directory, checks if are images and ads them to a list (see below how to display flash banners) 
while ($file = $imgs->read()) { 
if (eregi("gif", $file) || eregi("jpg", $file) || eregi("png", $file)) 
$imglist .= "$file "; 

} closedir($imgs->handle); 

//put all images into an array 
$imglist = explode(" ", $imglist); 
$no = sizeof($imglist)-2; 

//generate a random number between 0 and the number of images 
$random = mt_rand(0, $no); 
$image = $imglist[$random]; 

//display image 
echo '<img src="'.$img_folder.$image.'" border=0>'; 
?> 

Answer 1

仕事：：

document.getElementById('the-img-id').onclick = function() { 
    var randomInt = Math.round(Math.random() * 12); // 12 is the max 
    this.src = '/path/to/images/img-'+randomInt+'.jpg'; // replace the src 
} 

これは/path/to/images/img-1.jpgで動作します

はここで、ランダムな画像にコードです。

また、配列にすることができますコメント（//の後）で

var myImages = [ 
    'foo.jpg', 
    'bar.jpg', 
    'something.jpg', 
    'someotherting.jpg', 
    'ahhhanpng.png' 
]; 

// select a element with id="the-img-id" 
document.getElementById('the-img-id').onclick = function() { 
    var randomInt = Math.round(Math.random() * myImages.length-1); // Create random number 
    this.src = '/path/to/images/'+myImages[randomInt]; // replace the src with the new img 
} 

ルックをし、いくつかのコードをGoogleとあなたはこの正常に使用されます。

Answer 2

あなたはjavascriptを使用する必要があります。 getElementById（ "idOfImageElement"）。src = "newSrc"を使用します。