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;

因此，如果您只有135和140之间的5张图片，那么您的脚本将如下所示：

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>

Answer 2

未经过测试但是这样的事情应该可以使用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();

你的意思是什么

Answer 3

您使用的是哪种类型的服务器？使用PHP或ASP，您可以使用在脚本中循环显示图像的脚本来完成此操作。因此，您的HTML只会指向脚本而不是直接指向图像：

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

然后你的脚本将旋转你的各种图像。这是一个PHP示例：

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

使用可以使用JavaScript来更改图像标记的src字段。首先在您的img标记中插入ID属性，或者在同一页面上更频繁地显示NAME属性。

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

然后编写脚本并更改src字段：

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

Answer 5

如果您只想使用客户端解决方案，请尝试以下方法：

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

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

5 个答案: