Javascript.RU

Простой слайдер без jQuery. A Simple Image Slider without jQuery.

Как известно, слайдер - устройство для отображения видеоряда, состоящего из графического или текстового контента. Чаще всего выполнен на базе фреймворка jQuery. Ну любит народ эту фичу, хлебом не корми.
Решил написать свой.

Преимущества:
- малый "вес" благодаря отсутствию фреймворка
- структурно инкапсулирован (не загрязняет глобальную область переменных)
- простота подключения и настройки
- возможность интеграции в редактор

В "проекте" использовал две "изюминки".
1. Все картинки слайдера стыкуются друг с другом слева направо и представляют собой один графический файл. Благодаря этому структура слайдера упростилась до одного блока div.
2. Все свойства слайдера (в том числе и имя графического файла) хранятся в универсальном аттрибуте title. Формат записи свойств отличается от JSON: строковые переменные не надо брать в кавычки, разделительный знак между парами ";" Вместо "true" у меня "yes".

В результате в идеальном случае, если все настройки слайдера совпадают с настройками по умолчанию, получаем:

<div class="slider" id="slider"></div>

Можно посмотреть здесь Демо1 и Демо2 и Демо3
В Демо3 javascript не сжат.

Слайдеры подключаем через getElementById() или getElementsByClass():
В первом случае понятно, как в демоверсиях.
Во втором случае можно так:

function getElementsByClass(elClass) {
    if(document.getElementsByClassName) {
        return document.getElementsByClassName(elClass)
    } else {
        var result = [], i;
        var allElems = document.getElementsByTagName('*'); 
        for(i = 0; i < allElems.length; i++) {
            if (allElems[i].className && allElems[i].className == elClass) {
                result.push(allElems[i]);
            }
        }	
        return result;
    }
}
var slider = getElementsByClass("slider");
for(i = 0; i < slider.length; i++){
    zSlider.ini(slider[i]);
}

Описание свойств:
- src: slider.jpg - путь/имя файла картинки
- imgs: 7 - кол-во картинок в картинке
- wdth: 600 - ширина слайдера/картинки в пикселях
- hght: 340 - высота слайдера/картинки в пикселях
- tmtr: 333 - длительность перехода в милисекундах
- colr: red - цвет бордюра/квадрата, можно в формате #rrggbb
- tran: Left, LeftRight, inLeft, inRight, toRight, fade, sliceRight, BlocksLine, BlocksRnd, BlocksLineColor, BlocksRndColor - эффект при смене картинок
- ctrl: false, yes - вывод панели управления
- ctrx: 0, left, center, right или число - позиция панели управления по х
-ctry: 0, или число - позиция панели управления по y
- slic: 12 - количество "ломтиков", на которые режется картинка
- cols: 8 - количество квадратов по горизонтали
- rows: 4 - количество квадратов по вертикали

Недостатки:
- прокручивает только картинки
- не смог сделать автопрокрутку

Можете "поиграть". Попробуйте изменить эффект перехода или расположение панели управления. Написание своих эффектов приветствуется
Буду рад отзывам.

-1

Автор: gordon freeman, дата: 7 февраля, 2013 - 01:02
#permalink

код нормальный а вот колбаса из слайдов это жесть


Автор: Гость (не зарегистрирован), дата: 25 февраля, 2014 - 19:37
#permalink

А есть простой пример, без переключения кружочками, но при возможности переключения стрелками?


Автор: Гость (не зарегистрирован), дата: 23 июня, 2016 - 10:43
#permalink

fnPlay(sld);
}
//fnPlay(sld); -- тут две наклонные уберите и будут автоматически переключаться
}
}
}())


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

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
16 + 0 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
Больше записей нет. Прокомментируйте эту запись - может быть, тогда он что-нибудь еще хорошее напишет ;)
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum