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

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

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

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

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

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

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

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

  • Код
  • Ресурс
  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2.<html>
  3.<head>
  4. <script src="jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script>
  5. <script src="jquery-ui-1.7.1.custom.min.js" language="javascript" type="text/javascript"></script>
  6. <script src="slider_test.js" language="javascript" type="text/javascript"></script>
  7.
  8.</head>
  9.<body>
10.<div id="content-slider"></div>
11.<div id="content-scroll">
12. <div id="content-holder">
13. <div class="content-item">
14. <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p>
15. <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p>
16. </div>
17. <div class="content-item">
18. <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p>
19. <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p>
20. </div>
21. <div class="content-item">
22. <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p>
23. <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p>
24. </div>
25. <div class="content-item">
26. <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p>
27. <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p>
28. </div>
29. <div class="content-item">
30. <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p>
31. <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p>
32. </div>
33. </div>
34.</div>
35.</body>
36.</html>

        

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

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

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

  • Код
  • Ресурс
  1. <style>
  2. #main {
  3. width: 510px;
  4. margin: 0 auto;
  5. }
  6. #content-slider {
  7. width: 490px;
  8. height: 6px;
  9. margin: 5px;
10. background: #BBBBBB;
11. position: relative;
12. }
13. .ui-slider-handle {
14. width: 8px;
15. height: 14px;
16. position: absolute;
17. top: -4px;
18. background: #478AFF;
19. border: solid 1px black;
20. }
21. #content-scroll {
22. width: 500px;
23. height: 300px;
24. margin-top: 10px;
25. overflow: hidden;
26. border: solid 1px black;
27. }
28. #content-holder {
29. width: 1500px;
30. height: 270px;
31. }
32. .content-item {
33. width: 290px;
34. height: 270px;
35. padding: 5px;
36. float: left;
37. }
38. </style>

        

После этого пропишите правильный путь к файлам 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.

  • Код
  • Ресурс
  1.$(document).ready(function(){
  2. $("#content-slider").slider({
  3. animate: true,
  4. change: handleSliderChange,
  5. slide: handleSliderSlide
  6. });
  7.});
  8.
  9.function handleSliderChange(e, ui)
10.{
11. var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
12. $("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
13.}
14.
15.function handleSliderSlide(e, ui)
16.{
17.
18. var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
19. $("#content-scroll").stop().animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
20.}

        

Объясняю в подробностях как и что работает, - во второй строке с использованием 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, не перезагружая страницу. На этом всё дорогие читатели, успехов и до встреч!

Скачать слайдер архивом - slyder.zip

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

  • Код
  • Чистый код
  1.<script type="text/javascript">
  2.$(document).ready(function(){
  3. $("#content-slider").slider({
  4. animate: true,
  5. change: handleSliderChange,
  6. slide: handleSliderSlide
  7. });
  8.});
  9.
10.function handleSliderChange(e, ui)
11.{
12.
13. var maxScroll = $("#content-scroll").prop("scrollWidth") - $("#content-scroll").width();
14.
15. $("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
16.}
17.
18.function handleSliderSlide(e, ui)
19.{
20.
21. var maxScroll = $("#content-scroll").prop("scrollWidth") - $("#content-scroll").width();
22.
23. $("#content-scroll").stop().animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
24.}
25.</script>

        

Загрузить архивом для jQuery версии 1.6+


Александр Ермаков