Как изменить изображение при обновлении страницы с помощью 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> 

Answer 2

Какой тип сервера вы используете? Используя 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 3

не проверял, но что-то вроде этого должны работать, используя 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 4

Использование может изменить поле Src использовать JavaScript тега изображения. Сначала вставьте атрибут идентификатора в свой тег img или атрибут 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>