使用JavaScript刷新页面时如何更改图像？

Question

I want to change the image when the page is refresh using html. I place my partial code here. i want a script or anything do change the image when the page gets refresh.. Please help me to do this using html ...

        <div class="one-image">
           <a href="">
            <img src="img/IMG_1035.jpg" class="giThumbnail" alt="Nightclubs"></a><h4 class="giDescription">
             Nightclubs</h4>
             </div>

the above image tag image is change every refresh.. please help me ..

Answer 1

I believe this would work, but all your images would have to be sequentially named, eg 1-100. Also note that the script was placed AFTER the IMG tag.

<div class="one-image">            
  <a href="">             
    <img id="imgRand" src="" class="giThumbnail" alt="Nightclubs">
  </a>
  <h4 class="giDescription">              
    Nightclubs
  </h4>              
</div> 

<script language="javascript">
  // random number between 1 and 100
  var numRand = Math.floor(Math.random()*101);
  document.getElementById("imgRand").src = "img/IMG_"+numRand+".jpg";
</script>

The random formula in JS is:

var random = Math.floor(Math.random() * (max - min + 1)) + min; 

so if you only had 5 images between 135 and 140 your script would look like:

var random = Math.floor(Math.random() * (140 - 135 + 1)) + 135; 

If you wanted to change the image client-side, like a slideshow, just add a timer.

<script language="javascript">
  function setImg(){
  // random number between 1 and 100
  var numRand = Math.floor(Math.random()*101);
  document.getElementById("imgRand").src = "img/IMG_"+numRand+".jpg";}


  // call it the first time
  setImg();

  // set an interval to change it every 30 seconds
  window.setInterval("setImg()",30000);
</script>

Answer 2

Not Tested but something like this should work using Javascript:

//Add following inside script tag
//Add id to your image tag
var theImages = new Array();
theImages[0] = 'images/first.gif' // replace with names of images
theImages[1] = 'images/second.gif' // replace with names of images
theImages[2] = 'images/third.gif' // replace with names of images
......
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.getElementById("yourImgTagId").src = theImages[whichImage];
}

//call the function 
showImage();

Did you mean something like that

Answer 3

What type of server are you using? Using PHP or ASP you can accomplish this using a script that cycles through your images in a script. So your HTML would just point to the script instead of directly to an image:

<img src="image_rotation_script.php" class="giThumbnail" alt="Nightclubs">

Then your script would rotate through your various images. Here is a PHP example:

<?php
header('content-type: image/jpeg');
// Your own logic here to pull from a database, randomize an array of images etc.
$images = array('img/IMG_1.jpg','img/IMG_2.jpg','img/IMG_3.jpg');
$imageFile = array_rand($images);
$image = imagecreatefromjpeg($imageFile);
imagejpeg($image);
imagedestroy($image);
?>

Answer 4

Use can use JavaScript to change the src field of the image tag. First insert an ID attribute to your img tag, or a NAME attribute if it appears more often on the same page.

<img id="nightClubImage" src="img/IMG_1035.jpg" class="giThumbnail" alt="Nightclubs">

Then write a script and change the src field:

document.getElementById('nightClubImage').src = "newImage.jpg";

Answer 5

If you want use only client-side solution try this:

<img src="img/IMG_1035.jpg" class="giThumbnail" alt="Nightclubs">
<script type="text/javascript">
    var images = ['img/IMG_1035.jpg', 'img/IMG_1036.jpg', 'img/IMG_1037.jpg'];
    document.getElementById('gitThumbnail').src = images[Math.round((Math.random() * (images.length-1))];
</script>