Простенькое слайд-шоу на 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]);//заменяем атрибут
    });
});


Наш блок в видео одной картинки. Предварительно загружаем туда прелоадер:

<img src='/img/35.gif' id='slideShow1' alt='' />

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

Все оказалось очень просто. Смотрим пример. Для теста на скорость решил вывел 100 таких блоков на одной странице. Работает вполне достойно.

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