jQuery слайдер

Опубликовано admin - пт, 01/28/2011 - 22:21

Здравствуйте уважаемые читатели! Наконец-то я вернулся из армии и теперь можно вновь заняться написанием статей о jQuery. Хотя за этот год их появилось достаточно больше количество, как всегда они мало раскрывают сущность jQuery, а носят поверхностный характер и тем более мало кто раскрывает секреты создания плагинов и учит правильно создавать собственные разработки на jQuery. Я же стараюсь объяснять всё в подробностях.

И так, начнём. Теория о jQuery слайдерах!

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

  • случайная смена изображений по прошествии определённого времени;
  • возможность смены картинок при наведении курсора и возобновление автоматической смены при отведении курсора;
  • возможность максимальной настройки слайдера.

 

Теоретически Вам нужно представить контейнер в котором будут содержаться картинки наложенные друг на друга, с определенным смещением от правого края контейнера каждой картинки на расстояние, пропорционально зависящее от удаления каждой картинки от правого края контейнера. Как создать контейнер, очень просто, напишите:

После того как мы создали контейнер с id. Нужно подумать как разместить в нём изображения таким образом, чтобы каждое из них находилось немного выше и правее предыдущего, чтобы из этого получились вкладки из изображений. Самым простым способом будет вставить изображения в контейнер и абсолютно позиционировать их относительно верхнего левого угла контейнера. То есть нам нужно дописать в контейнер следующее:

Не забудьте о подключении css:

Практика с jQuery!

Для того, чтобы изображения находились на равно - пропорциональном расстоянии относительно левого края контейнера, необходимо использовать jQuery:

Некоторые переменные, например slykoef пока не объясняются, здесь лишь Вам нужно уяснять что все изображения, смещаются от левого края благодаря этим строчкам:

В 19 строке метод jquery each предназначен для обхода всех изображений - их смещение в лево на значение сохраненное в переменную slykoef, так же изображения находятся в стеке в котором каждое последующее изображение имеет свойство z-index увеличенное ровно на единицу.

Итак, что мы имеем блок со смёщенными изображениями, теперь нужно добавить функциональности и интерактивности, - создадим эффект наведения курсора на изображения:

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

Разберём его подробно, первая строка:

Данный отрезок кода предназначен для проверки наведён ли курсор на текущее изображение или нет, если курсор навёден на текущее изображение, то мы запрещаем выполнение каких-либо действий. Если же это не текущее изображение, то идём дальше - три нижеуказанные строки кода помечают активное изображение и скрывают комментарий, чтобы его плавно отобразить в дальнейшем:

По сути, данный отрезок является центральным в понимании работы слайдера, все изображения могут быть помечены либо классом slyleft, либо slyright, в зависимости от этого происходит смещение изображений от текущего активного изображения, если изображения имеют класс slyleft, то все находящиеся от активного изображения справой стороны переместятся вправо и получат класс slyright, 7 строка размещает комментарий, но пока его не отображает, это будет сделано в 13 строке, и, как вы видите, с 9 строки по 13 происходит эффект анимации изображений, то есть изображения перемещаются слева на право благодаря функции animate, которою вы можете наблюдать в 12 строке:

С 17 строки располагается противоположный метод, для изображений с классом slyright, если Вы наводите курсор на данные изображения все изображения с классом slyright будут перемещены справа на лево с одновременной сменой класса с slyright slyleft. В отличие от предыдущего кода данное условие дополнено строками :

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

Можно сказать что всё, но есть несколько методов которые создают автоматическую смену изображений по истечении заранее установленного времени в секундах, конечно, создать их возможно только используя методы javascript setInterval и clearInterval. В данных строках создана функция triggerclick(), запускающая событие mouseover, для изображения в случайном порядке. Случайный порядок создаётся в 3 строке. Функции в 6 и 9 строках являются обработчиками событий mousemove и mouseleave, их значение в следующем - если мы наводим на слайдер курсор, то интервал должен быть удалён - строка 7, если отводим от слайдера, то интервал должен быть вновь создан - строка 11. Удалять и создавать интервалы нужно всегда, так в противном случае будут запущены нескольку копий интервалов, что будет неверно и приведёт с цикличности запуска смены изображений.

Ну вот можно сказать и всё, только осталось весь указанный код обернуть в контейнер jQuery:

После чего у Вас должен получиться плагин на jQuery который может стать основной для Ваших собственных разработок, а следовательно для продвижения вашего сайта или блога:

А вот и визуальный результат:

Футбол (англ. football, «ножной мяч»). В настоящее время самый популярный и массовый вид спорта в мире. Женщина юного возраста! Виноградная улитка  — наземный брюхоногий моллюск отряда лёгочных улиток семейства гелицид. Красота! Любовь — чувство, свойственное человеку, глубокая, самоотверженная привязанность к другому человеку... Стоп!

Данный слайдер распространяется на данном сайте бесплатно и находится в отдельном разделе(slyshow), где Вы можете скачать его полностью в zip архиве!

Взаимосвязанные материалы

# 1. О сайте (суббота, июля 6, 2019 - 21:51 ),

Сайт slyweb.ru содержит многочисленную информацию о разработке сайтов и их поддержки в рабочем состоянии.

На сегодняшний день slyweb.ru представляет следующие услуги:

читать...
# 2. Как написать первый плагин на jQuery, с использованием ajax? (воскресенье, июня 3, 2018 - 10:52 ),

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

# 3. jQuery для начинающих! (пятница, июня 1, 2018 - 21:28 ),

Возможно Вам интересно спросить: "Почему у меня возникла мысль написать подробное мини-руководство об ajax на jQuery?". читать...

# 4. jQuery - самое нужное! Карусель! (воскресенье, мая 20, 2018 - 19:22 ),

Здравствуйте уважаемые читатели, продолжаем цикл статей о самом нужном в jQuery. Сегодня я научу Вас делать jQuery карусель. читать...

# 5. Аудио плеер на основе HTML5 и jQuery (вторник, апреля 17, 2018 - 19:23 ),

Сегодня я расскажу как сделать интересный вариант плеера на основе html 5 и jQuery.

Плеер будет поддерживать следующие функции:

читать...
На разработку сайта! Скидки до 20%!