WebGuruz

Достаточно часто видел такое же бесконечное слайдшоу выполненное на 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() не дает. Сделать то сделал, а как называть такое чудо так и не понял, то-ли слайдшоу, то-ли карусель или просто смена картинок =)

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

• Оптимизация кода js. Таймеры. (0)
• Красивый select и его минусы для разработчика (3)
• Ajax загрузка файлов с помощью iframe (4)