如何使用JavaScript刷新頁面時更改圖像？

我想在使用html刷新頁面時更改圖像。我把我的部分代碼放在這裏。我想一個腳本或做任何改變圖像時，頁面刷新得到。請幫助我做到這一點使用HTML ...如何使用JavaScript刷新頁面時更改圖像？

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

上述圖像標籤的圖像是改變每刷新..請幫助我。。

來源

2012-03-14 Fernando

的變化是什麼？ – Dogbert 2012-03-14 11:24:15

是否想在每次刷新時顯示隨機（不同）圖像？ – 2012-03-14 11:28:23

感謝您的快速回復。是的絕對 – Fernando 2012-03-14 11:39:06

我相信這會工作，但所有的圖像都必須順序命名，例如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>

來源

2012-03-14 11:38:30

假設我只使用五個圖像意味着我做了什麼？ – Fernando 2012-03-14 11:45:15

降低隨機數發生器的範圍，以在1-5之間選擇圖像並將其命名爲IMG_1.jpg，IMG_2.jpg等。 – 2012-03-14 11:56:15

我應該從101改爲任何東西啊？ – Fernando 2012-03-14 12:00:09

你使用的是什麼類型的服務器？使用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); 
?>

來源

2012-03-14 11:31:52 davidethell

未經測試，但這樣的事情應該工作使用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();

您的意思是類似的東西

來源

2012-03-14 11:34:47

使用可以使用JavaScript的改變src場的圖片標籤。首先在你的img標籤中插入一個ID屬性，或者如果在同一頁面上出現的頻率更高，可以使用NAME屬性。

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

然後寫一個腳本，並更改SRC領域：

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

來源

2012-03-14 11:35:58 Stefan

我不知道java腳本請給我完整的代碼朋友.. – Fernando 2012-03-14 11:40:03

Sudhirs答案是正確的。往上看。 – Stefan 2012-03-14 11:44:09

如果希望只使用客戶端解決方案試試這個：

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

來源

2012-03-14 11:42:00 Minty

如何使用JavaScript刷新頁面時更改圖像？

回答

相關問題