Изменить изображения с помощью JQuery

Question

У меня есть тег изображения на моей странице. Мне нужно, чтобы тег показывал разные изображения на каждые 1 с. Мои фотографии хранятся в папке «pict». Как добиться этого с помощью JQuery?

Answer 1

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

Смотреть это работает здесь: http://jsbin.com/iledo3

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

HTML:

<div id="slideshow-container"> 
    <div id="slideshow"> 
     <img src="img/home-1.jpg"> 
     <img src="img/home-2.jpg"> 
     <img src="img/home-3.jpg"> 
    </div> 
</div> 

CSS:

#slideshow-container { height:410px; position:relative; } 
#slideshow-container img { position:absolute; left:0; top:0; width:100%; height:100% } 
#slideshow  { position:absolute; left:0; top:0; width:100%; height:100%; list-style:none } 
#slideshow img { width:904px; height:410px; background-repeat:none; background-position:top left; position:absolute; left:0; top:0 } 
#slideshow  { position:absolute; left:0; top:0; width:100%; height:100%; } 
#slideshow img { width:904px; height:410px; background-repeat:none; background-position:top left; position:absolute; left:0; top:0 } /* adjust this for your images */ 

JQuery:

$('#slideshow img:gt(0)').hide(); //hide all images except first initially 
    setInterval(function(){ 
     $('#slideshow :first-child').fadeOut('slow') 
     .next('img').fadeIn('slow') 
     .end().appendTo('#slideshow');}, 
     2000); //2 second interval 

Answer 2

Вы можете либо захватить элемент img, либо использовать attr method, чтобы изменить его src, или replace с другим элементом img. В любом случае вы, вероятно, захотите использовать setInterval для обработки времени.

Answer 3

Может ли вам помочь плагин jQuery Cycle?

Answer 4

Сохраните все источники изображения в массиве, затем, если вы хотите выбрать случайный, используйте функцию Math.random и, наконец, используйте jQuery.attr(), чтобы переключить атрибут src вашего изображения. Все это должно быть внутри функции, которая запускается каждую секунду. Вот версия проекта кодекса, при условии, ваши изображения сохраняются в папке images относительно текущего URL:

function imageRotate() { 
    var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"]; 
    var i = Math.floor(Math.random() * images.length); 
    jQuery('#my-image').attr("src", "/images/" + images[i]); 
    setTimeout('imageRotate()', 1000); // Re-launch after one second 
} 
setTimeout('imageRotate()', 1000); // First launch after 1 second interval 

В качестве альтернативы вы можете попробовать jQuery Cycle plugin.

Answer 5

Пример:http://jsfiddle.net/8GkS7/

$(function() { 
    var images_array = [ 
     "/pict/image0.jpg", 
     "/pict/image1.jpg", 
     "/pict/image2.jpg", 
     "/pict/image3.jpg", 
     "/pict/image4.jpg" 
    ]; 

    var i = 0; 
    var len = images_array.length; 
    var $img = $('#myImage'); 

    setInterval(function() { 
     $img.attr('src', images_array[ i++ % len]); 
    }, 1000); 
}); 

Или, если ваши изображения пронумерованы так, вы на самом деле могли бы сделать это без массива:

$(function() { 
    var i = 0; 
    var len = 5; // Total number of images 
    var $img = $('#myImage'); 

    setInterval(function() { 
     $img.attr('src', "/pict/image" + (i++ % len) + ".jpg"); 
    }, 1000); 
}); 

EDIT: Обратите внимание, что для использования второй пример, номер индекса для ваших изображений должен начинаться с 0. Если они начинаются с 1, вам понадобится (i++ % len + 1).