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

Question

我想在使用 html 刷新页面时更改图像。我把我的部分代码放在这里。我想要一个脚本或任何在页面刷新时改变图像的东西..请帮助我使用 html 来做到这一点......

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

上面的图片标签图片每次刷新都会改变..请帮助我..

Answer 1

我相信这行得通，但是您的所有图像都必须按顺序命名，例如1-100。另请注意，脚本位于 IMG 标签之后。

<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>

JS中的随机公式为:

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

因此，如果您只有 5 张介于 135 到 140 之间的图像，您的脚本将如下所示:

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

如果您想在客户端更改图像，例如幻灯片，只需添加一个计时器即可。

<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>