Как изменить изображение при обновлении страницы с помощью JavaScript? - PullRequest
Новая
       34

Как изменить изображение при обновлении страницы с помощью JavaScript?

1 голос
/ 14 марта 2012

Я хочу изменить изображение, когда страница обновляется с помощью 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>

изображение выше тега изображения меняется при каждом обновлении .. пожалуйста, помогитея ..

Ответы [ 5 ]

3 голосов
/ 14 марта 2012

Я считаю, что это будет работать, но все ваши изображения должны быть последовательно названы, например, 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>
2 голосов
/ 14 марта 2012

Не проверено, но что-то вроде этого должно работать с использованием 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();

Вы имели в виду что-то подобное

0 голосов
/ 14 марта 2012

Если вы хотите использовать только клиентское решение, попробуйте это: 

<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>
0 голосов
/ 14 марта 2012

Использование может использовать JavaScript для изменения поля src тега изображения.Сначала вставьте атрибут ID в ваш тег img или атрибут NAME, если он чаще появляется на той же странице. 

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

Затем напишите скрипт и измените поле src: 

document.getElementById('nightClubImage').src = "newImage.jpg";
0 голосов
/ 14 марта 2012

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