Слайдшоу на JQuery.

После прочтения топика о JQuery я сразу побежал заказывать книгу. Признаюсь, читал c БОЛЬШИМ интересом. Очень захотелось посмотреть, что же это за зверь такой, на практике. К счастью подвернулась одна из доработок для проекта viewsale.ru, а затем и большая работа по сайту. В итоге, как мне кажется, получилось неплохо. Хочу поделиться, как сделать легкое слайд-шоу.

Поискав на хабре, нашел некоторое решение. Получилось разместить только 3-и блока по 12 картинок в каждом. Больше и не понадобилось, т.к. браузер не выдерживал. Начинал тормозить и вылетать.

В итоге нужно было срочно решать задачу. Ответ нашелся довольно быстро, благодаря статье Isis .
Как это работает?

Пример будет рассмотрен только для одного блока. Нам понадобятся библиотека jQuery и jQuery Timers.

Создаем массив с изображениями:

imgArray1 = new Array();
imgArray1[0]='1.jpg';
...
imgArray1[n]='n.jpg';


Далее пишем процесс смены слайдов:

jQuery(function(){
var countArray1 = imgArray1.length; //узнаем длину массива
var countArray1V = 0;
jQuery("img#slideShow1").everyTime(3000,function(i) {//для блока #slideShow1 каждые 3 секунды
countArray1V++;
if(countArray1V > (countArray1-1))countArray1V=0;
//заменяем атрибут jQuery("img#slideShow1").fadeIn(2000).attr("src",imgArray1[countArray1V]);
});
});

Что происходит?

Запускается таймер, вместе с ним увеличивается переменная countArray1V. Далее если значение countArray1V достигло значения длинны массива countArray1, то countArray1V мы приравниваем к 0. Далее процесс повторяется.

Работает вполне достойно.

Спасибо за внимание. Надеюсь материал был полезен.