jQuery - самое нужное! Карусель!

Опубликовано admin - вс, 05/20/2018 - 19:22

Здравствуйте уважаемые читатели, продолжаем цикл статей о самом нужном в jQuery. Сегодня я научу Вас делать jQuery карусель. Что означает jQuery "карусель", по моему мнению, для главной страницы сайта данный плагин вполне подоходит, так как совмещает в себе эффективную рекламу и меню с выходом на основные страницы сайта, блога, например на страницы о новостях, при чем изображения размещенные с левой стороны "карусели" будут информировать читателя об основном сюжете новости на сайте. jQuery карусель использует простой плагин, состоящий из нескольких десятков строк jQuery кода.

Оглавление статьи "jQuery - самое нужное! Карусель!"

 

Шаг 1. Подключаем нужные нам js библиотеки!

"Карусель" будет выполнять функцию пролистывания блока с новостями, для этого нам нужно первоначально подключить следующие файлы jQuery:

Не забудьте про файл css - karusel.css, все css файлы должны находиться до подключаемых js библиотек.

Создайте файл, например index.html, после чего добавьте код, указанный ниже, в данный файл, при этом обратите внимание на правильность подключаемых файлов, - css файла karusel.css, js библиотек, первой должна быть jquery-1.5.min.js, после неё сам плагин karusel.js. Данные файлы должны находиться в том же каталоге, что и index.html.

Шаг 2. Создаём html структуру!

Основным блоком является элемент div с классом "main-hot", в нём располагаются три изображения, первое не скрывается, остальные два скрываются с помощью css свойства display:none, справа располагается элемент ul с классом «tophot». Основной недостаток который вы почувствуете при работе с данным плагином, - это необходимость ручной настройки параметров высоты и ширины элементов, о чём я Вам расскажу сейчас. Просмотрите следующий css код:

Все элементы жёстко зафиксированы, тот же основной контейнер имеет свойства height:250px и width:697px, изображения имеют фиксированный размер ширины width:397px. Но больше всего Вам придется повозиться с элементами li, поскольку изменяя высоту изображений, либо изображения будут обрезаться, либо непропорционально смотреться элементы li. Поэтому вам нужно рассчитывать высоту элементов li исходя из формулы v = heightofmain-hot/col, где v - высота, heightofmain-hot - высота всего контейнера, col - количество элементов li. При этом для второго и последующего элемента li нужно будет задать свойство top, для его смещение относительно верха контейнера, например, если высота контейнера равна 300 px(строка 8) , то размеры элементов li будут по 100 px, при этом смещение второго и третьего элемента li будт 100px(строка 93) и 200px(строка 98) соответственно.

Шаг 3. jQuery скарусель!

А вот и сам jQuery код, для начинающих он сложен, я не буду объяснять его весь, только настройки:

  • sensitivity - чувствительность смены изображений, чем выше тем медленнее анимация появления изображения (больше 10 не рекомендую указывать)
  • interval скорость смены изображений 100
  • timeout параметр, задающий количество секунд по прошествии которых будет возможна повторная анимация смены изображений, после того как пользователь проведет курсор над каждой вкладкой (рекомендую ранение равное 0)

Код jQuery никаких дополнительных возможностей не представляет, если Вам нужно автоматическая смена изображений даже если пользователь не наводит курсор, то Вы можете взять логику и код из статьи о слайдере slyshow- по адресу - jQuery слайдер "slyshow".

Шаг 4. Смотрим результат!

 

 Шаг 5. Авто карусель!

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

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

Внимание! В jQuery 1.6.1 необходим заменить строку 14:

на следующий код:

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

# 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.

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

читать...

Комментарии

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

Спасибо!

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