Смена картинок на jquery

07/13/2010, автор admin, категории Web-разработка

Достаточно часто видел такое же бесконечное слайдшоу выполненное на flash, а я решил найти простое решение, с возможностью изменения картинок с админки сайта.
Для того чтобы сделать такого рода смену картинок на javascript c использованием jquery потребуется совсем не много знаний. И это займет не более 15 минут. В <div> в котором будут менятся изображения вставим два тега <img>, как это сделано ниже <div id="photos"><img style="position: absolute; z-index: 200; display: block;" src="" alt="" id="photo1"><img style="position: absolute; z-index: 100; display: none;" src="" alt="" id="photo2"></div> Далее тут же или при загрузке страницы указываем массив картинок (я формировал его с помощью php для возможности смены через админку)

    
var imgs = ["img_1.jpg",
"img_2.jpg",
"img_3.jpg"];
var j=1;
var cnt = imgs.length-1;
//сразу при загрузке показваем первую картинку
$('#photo1').attr('src', imgs[0]);
//подгружаем вторую в скрытый див
$('#photo2').attr('src', imgs[1]);
//тут начинается бесконечное слайдшоу
setInterval("photos()", 4000);

И сама функция photos(). Не удивляйтесь что всего пару строк, такой уж jquery.

function photos() {
$('#photo1').fadeOut("slow", function() {
 $(this).attr('src', imgs[j]).fadeIn("slow");
});
j++;
if(j>cnt) {
  j=0;
}
$('#photo2').attr('src', imgs[j]);
}

Как видите все отлчино работает, причем никаких зависаний и подвисаний браузера функция setInterval() не дает. Сделать то сделал, а как называть такое чудо так и не понял, то-ли слайдшоу, то-ли карусель или просто смена картинок =)

Читать похожие статьи:

12 комментариев “Смена картинок на jquery”

  1. Евгений:

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

  2. admin:

    все так же просто в var imgs = ["img_1.jpg","img_2.jpg","img_3.jpg"]; вместо относительного пути указываем полный. т. е var imgs = ["http://webguruz.ru/wp-content/uploads/img_1.jpg"]; тоже пудет работать

  3. Видимо, вопрос был о том, как сделать отдельную ссылку с каждой картинки :)

  4. Саня:

    Если у кого не заработало – попробуйте переделать

    setInterval(«photos()», 4000);
    на
    setInterval(photos, 4000);
    у меня только так заработало. Админу большущее спасибо. Очень выручил.

  5. Вера:

    Здравствуйте! я только изучаю juery поэтому извините, если глупый вопрос, но почему бы не задать в div сделать background-image которое и менять через setinterval?

  6. admin:

    потому что не будет предзагрузки следующей картинки, картинка будет загружаться только после того как ее поставят в background-image, следовательно не получиться красивого слайдшоу

  7. Вера:

    Большое вам спасибо за за быстрый ответ, мне у вас понравилось, сайт очень симпатичный, тематика, правда, не для меня, но кое-что нашлось и для меня, и еще с огромным удовольствие почитала про дарвиновскую премию. эх, побольше бы про jquery!

  8. admin:

    спасибо)) как видите давно уже не писали ничего интересного… а у вас есть какие-то задачи реализацию которых вы бы хотели увидеть на jquery?

  9. Илья:

    Я вот только не понял зачем нужно изображение с айди photo2, оно же ни где не используется!?

  10. Vladimir:

    Здравствуйте, хотелось бы увидеть реализацию смены картинок как в windows phone 7.5

  11. Админ молодец. Куча га*нюков выкладывают варианты тяжелые и глупые и не понятны…все просто ..весело и задарно 0 как и должно быть. Красавчик

  12. V-IX:

    Спасибо большое!
    Делал скрипт абсолютно другого назначения, но ваш лег в основу и за это Вам огромное спасибо) сам бы не спраился

Оставить комментарий