jQuery - самое нужное! Слайдер!

Опубликовано admin - сб, 07/02/2011 - 21:08

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

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

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

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

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

Итак, для начала создайте папку, в которую положите idnex.html. В этом файле укажите следующий код:

Оснвным блоком здесь является div c класом "content-scroll", в нём содержаться блоки с новостями (div с классом "content-item"), в котроые я потом объясню как нужно загружать данные из php и mysql.

Шаг 3. Подключаем css стили!

Подключите следующий css стиль к элементам слайдера, - сразу после открывающего тэга <head> поместите нижеуказанный код:

После этого пропишите правильный путь к файлам javscript, например если файл index.html находится корне папки, а javscript файлы в папке js, то атрибут src элемента script должен быть следующием - "js/jquery-ui-1.7.1.custom.min.js", то же самое сделайте для оставшихся файлов javascript (jquery-1.5.min.js и slider.js). Хотя я рекомендую использвать jquery с CDN сервера Google, а не с сервера виртуального хостинга.

Шаг 4. jQuery слайдер!

Следующий код должен быть помещён в файл slider.js, находящийся в папке js.

Объясняю в подробностях как и что работает, - во второй строке с использованием UI плагина slider создаётся слайдер, с помощью которого пердвигается и сам ползунок и новости находящиеся в div с id "content-scroll". Метод slide принимает следующие опции: "animate" - true - бегуно плавно перемещается, false - бегун перемещается без анимации; опция change - является обрабортчиком события change для слайдера, при срабатывании события запускается функция обработчик - handleSliderChange, slide - то же событие, но для него обработчик - функция handleSliderSlide. Я не буду вникать во всевозможные опции, фунции обработчики поддерживаемые Ui слайдером, скажу что все они объясняются в руководстве - slider UI на данном сайте.

То есть при срабатывании события change запускается функция обработчик handleSliderChange, давайте её расмотрим подробней, поскольку следующая за ней функция является её копиеий и на ней я останавливаться не буду. В handleSliderChange в перменную maxScroll записывается максимальный размер прокрутки (ширина рпокрутки блока - ширина блока), затём этот результа используется в формуле ui.value * (maxScroll / 100), где ui.value - занчение шкалы прокрутки в процентном соотношении ко все шкале прокрутки, а (maxScroll / 100) - 1 процент от максимального прокручивания блока с id "content-scroll". Из этого следует, что метод animate прокрутит плавно на расстояние полученное в резульатте умножение значение шкалы прокрутки на количество пикселей составляющих один процент от всей допустимой прокрутки блока за вычетом его ширины (maxScroll).

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

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

В следующей статьй("jQuery - самое нужное! Слайдер! Часть 2 - PHP") я научу вас выподить данные с помощью данного слайдера из базы mysql, не перезагружая страницу. На этом всё дорогие читатели, успехов и до встреч!

 

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

Когда Бог создавал время, он создал его доста¬точно.

Время и до нас, и после нас не наше. Ты заброшен в одну точку; растягивай ее — но до каких пор?

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

Храбрость — это презрение к смерти и боли.

Храбрецы умирают, но не сдаются.

В войне главное не оружие, а деньги.

Бог любит отважных.

Бог войны ненавидит колеблющихся.

На этой войне я наград не раздаю.Генерал А. И. Деникин о Гражданской войне.

Начиная с jQuery 1.6 необходимо использовать вместо метода attr() метод prop().

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

# 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%!