Стильный слайдер на базе jQuery

[Szen]

Предлагаю небольшой скрипт необычного слайдера. Ревлизован на базе jQuery.

Описание

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

Слайдер работает в автоматическом режиме и является неуправляемым.

Количество слайдеров на странице неограничено.

Скриншот

Внешне слайдер выглядит так:


Пример

Демка находится на сайте, кто захочет глянуть - пройдет. Да простят меня модераторы.
Демо стильного слайдера (ссылка внешняя!).

Установка

Для начала создаем структуру блоков, которые будут прокручиваться. Выглядеть они должны так:

<div style="background: #000000; color: #ffffff;" id="spslider3">
  <div>Блок в слайдере 1</div>
  <div>Блок в слайдере 2</div>
  <div>Блок в слайдере 3</div>
  ...
  <div>Блок в слайдере N</div>
</div>

Вместо "Блок в слайдере n" размещаем картинки, текст или любой другой HTML-объект. Также, вложенные теги DIV можно заменить на SPAN. Стиль основного родительского блока можете иначе, чем предложил я (IMHO, черный блок смотрится лучше).

После подготовки структуры, в теле HEAD подключаем jQuery, скрипт слайдера и делаем вызов функции запуска работы слайдера. Весь код выглядит так:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://szenprogs.ru/scripts/spslider3/spslider3.js"></script>
<script type="text/javascript"><!-- 
  $(function(){
    $spslider3.ready(2000,'spslider3',150,300,10);
  });
// -->
</script>

Параметры вызова

$spslider3.ready(speed, id, width, height, padding)

• speed - скорость смены блоков в слайдере, задается в миллисекундах.
• id - ID блока со слайдером.
• width - ширина каждого из 3-х внутренних блоков, задается в пикселях.
• height - высота каждого из 3-х внутренних блоков, задается в пикселях.
• padding - Поля между основным блоком и внутренними блоками, задается в пикселях.

Количество блоков со слайдером на одной странице неограничено. Достаточно создать новый блок с уникальным ID и выполнить вызов функции запуска.

Скрипт прикреплен к теме:
spslider3.zip

Приму и изучу все предложения и нарекания.

С уважением, Szen.

Дополнения:
2011.09.30: На основе скрипта сделан плагин для jQuery - jquery.threeslide

[Gozar]

Зачем здесь jquery если слайдер не как плагин?

Почему нельзя назначить свой класс? зачем id.

$('#'+id).eq(0).find('.spslider3sld').eq(2). - как-то это жутковато. Попахивает никакой архитектурой.

doit это init?

[Szen]

Gozar,
Думаю, не верно. init - инициализация. А у меня периодически выполняемая функция. Ничего умнее не придумал, как написать doit. Если есть лучшее предложение - приму.
Насчет плагина - даже не подумал. На днях перепишу.
Спасибо за совет!

[Szen]

Переделал скрипт под плагин для jQuery.

Формат блоков остался тот же самый:

<div style="background: #000000; color: #ffffff;" id="spslider3">
  <div>Блок в слайдере 1</div>
  <div>Блок в слайдере 2</div>
  <div>Блок в слайдере 3</div>
  ...
  <div>Блок в слайдере N</div>
</div>

Подключаем плагин в теле HEAD следующим кодом:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://szenprogs.ru/scripts/spslider3/jquery.threeslide.min.js"></script>
<script type="text/javascript"><!-- 
  $(function(){
    $('#spslider3').threeslide( { height: 300, width: 150, delay: 2000, padding: 10 } );
  });
// -->
</script>

Сам плагин выложен тут (полная и сжатая версия):
jquery.threeslide.zip
jquery.threeslide.min.zip

[melky]

$('#'+id).eq(0)
            .css('padding',p+'px')
            .css('width',(w*3+p*6)+'px')
            .css('height',(h+p*2)+'px')
            .css('position','relative')
            .css('overflow','hidden')
            .find('.spslider3sld')
                .css('float','left')
                .css('margin',p+'px')
                .css('overflow','hidden')
                .css('height',h+'px')
                .css('width',w+'px')
            ;
        ;

ууу... вызовы css можно превратить в один, передав объект

$.css({"top":"5px", "left":"0"})

..
зачем писать

$('#'+id)*!*.eq(0)*/!*

если элемент с любым айдишником всегда уникален ? т.е. один

..............

if(spd==undefined || spd==0 || spd=='') spd=1200;
        if(id==undefined || id==0 || id=='') id='spslider3';
        if(w==undefined || w==0 || w=='') w=200;
        if(h==undefined || h==0 || h=='') h=400;
        if(p==undefined || p==0 || p=='') p=10;

заместо такой проверки преобразовывайте в boolean

var undef, def="defined";
alert([!!undef, !!def]);

или сразу так - часто это называют "настройкой по-умолчанию" (т.е. если аргумент не передан, его значение становится указанным)

var undef, def="defined";
alert([  *!*undef || "default" , def || "default"*/!* ]);

это вообще страсть. не могу понять принципа работы - он понятен только писавшему, к сожалению. Но, этот кусок ужасно выглядит.

var s=$('#'+id).eq(0).find('.spslider3imgi').eq(i).html();
        $('#'+id).eq(0).find('.spslider3sld').eq(0).html(s);
        if(i < this.len[id]-1) i++; else i=0;
        var s=$('#'+id).eq(0).find('.spslider3imgi').eq(i).html();
        $('#'+id).eq(0).find('.spslider3sld').eq(1).html(s);
        if(i < this.len[id]-1) i++; else i=0;
        var s=$('#'+id).eq(0).find('.spslider3imgi').eq(i).html();
        $('#'+id).eq(0).find('.spslider3sld').eq(2).html(s);
        if(i < this.len[id]-1) i++; else i=0;

[Szen]

melky,
ну, мы учимся. Часть бардака я уже вычистил и собрал это все в плагин. А вот про объект в css не знал (почемуто), поэтому, поправлю.

[Виктор Кон]

А почему это надо делать с помощью jquery. Просто на js нисколько не сложнее. И тоже можно сделать самостоятельную процедуру (типа плагина)

[Szen]

Виктор Кон,
писать все ручками не вижу смысла. Зачем изобретать велосипед? Раз есть фреймворки, значит нужно ими пользоваться.

IMHO: Нормальный строитель не будет создавать кирпичи. Он просто построит из них дом.

[Gozar]

Зачем изобретать велосипед? Раз есть фреймворки, значит нужно ими пользоваться.

Странный вывод. Разве не разумнее брать то, что нужно, а не то что есть. Несмотря на то, что задал вопрос явный тролль, вопрос вполне разумный. Какой кстати ты велосипед изобретаешь с десятью строчками кода?

IMHO: Нормальный строитель не будет создавать кирпичи. Он просто построит из них дом.

Ну он тот что написал этот скрипт пока что таджик с плакатом "я твой дом труба шатал". Ты дом чуть ли не вверх ногами строишь.

[Nikolai-JS]

Что такое слайдер?
Это приложение для отображения меняющейся графической и/или текстовой информации дополнительно к основному контенту(статья, новость). При этом пользователю необходимо знать, сколько контента(фото) содержит слайдер и какой показывается в данный момент. Т.е. инфа в виде "5 из 10" или как-то графически необходима. Так-же нужны кнопки для управления.

Так как ничего этого у вас нет, то ваше произведение я бы отнёс в категорию "рекламные баннеры".

Так как ваш "слайдер" выполняет одну единственную функцию - бесконечная прокрутка, то без ущерба можно заменить его на (Achtung!) анимированный GIF . Пользователь даже не заметит подмены!

PS: Надеюсь не убил вашу любовь к JavaScript.