Здравствуйте уважаемые читатели, продолжаем цикл статей про самое нужное в jQuery. Сегодня я научу Вас деалать слайдер, при этом буду использовать jQuery UI. Заранее сообщаю, что в следующей статье под названием "jQuery - самое нужное! Слайдер! Часть 2 - PHP" будет сделан тот же слайдер но на основе ajax и php с mysql - для вывода новстей из базы данных.
Оглавление статьи "jQuery - самое нужное! Слайдер!"
- Шаг 1. Подключаем нужные нам js библиотеки!
- Шаг 2. Создаём html структуру из ul и li!
- Шаг 3. Подключаем css стили!
- Шаг 4. jQuery слайдер!
- Шаг 5. Смотрим результат!
- В заключение
Шаг 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()
.
134 просмотра
Взаимосвязанные материалы
Сайт slyweb.ru содержит многочисленную информацию о разработке сайтов и их поддержки в рабочем состоянии.
На сегодняшний день slyweb.ru представляет следующие услуги:
читать...Возможно рано или поздно Вам придётся писать серьёзные скрипты на jQuery, поскольку jQuery наиболее популярен в последнее время.
читать...Возможно Вам интересно спросить: "Почему у меня возникла мысль написать подробное мини-руководство об ajax на jQuery?".
читать...Здравствуйте уважаемые читатели, продолжаем цикл статей о самом нужном в jQuery. Сегодня я научу Вас делать jQuery карусель.
читать...Сегодня я расскажу как сделать интересный вариант плеера на основе html 5 и jQuery.
Плеер будет поддерживать следующие функции:
читать...