jQuery и вращающиеся картинки

09.01.2009

Вы, вероятно, успели заметить в самом верху этого блога блок с «крутящимися картинками«. Несмотря на то, что делается это достаточно быстро и просто с помощью jQuery plugin‘а Cycle, для некоторых всё ещё загадочно и непонятно как сделать такую же фишечку у себя на сайте. Сейчас я постараюсь разложить всё по полочкам и показать, что ничего сложного в этом нету.Для начала нам понадобятся:

1. jQuery скачать

2. Плагин Cycle скачать

3. Опционально: Плагин Easing скачать

Я начну с объяснения без Easing’a, но в конце статьи расскажу зачем он и как его использовать.

Подключаем jQuery и Cycle:

  1. <script language="JavaScript" src="./jquery.js" ></script>
  2. <script language="JavaScript" src="./cycle.js" ></script>

Далее на странице размещаем блок с id, например, равным «mytest» и помещаем в него 3 картинки, меняющиеся при нажатии на стрелку.

  1. <div id="mytest">
  2.  
  3. <img src="test1.jpg">
  4. <img src="test2.jpg">
  5. <img src="test3.jpg">
  6.  
  7. </div>

Чуть ниже разместим то, что будем считать стрелками с id arr_left для кнопки, которая будет осуществлять прокрутку картинки назад и arr_right для кнопки с прокруткой вперёд.

  1. <img src="left_arrow.gif" id="arr_left">
  2. <img src="right_arrow.gif" id="arr_right">

Теперь осталось оживить нашу страничку, подключив Cycle:

  1. $(document).ready(function(){
  2.     $(‘#mytest’).cycle({
  3.        fx:     ’scrollHorz’,
  4.        prev:   ‘#arr_left’,
  5.        next:   ‘#arr_right’
  6.     });
  7. });

В итоге наш HTML код будет примерно таким:

  1. <html>
  2. <head>
  3. <script language="JavaScript" src="./jquery.js" ></script>
  4. <script language="JavaScript" src="./cycle.js" ></script>
  5. </head>
  6. <body>
  7.  
  8. <div id="mytest">
  9. <img src="test1.jpg">
  10. <img src="test2.jpg">
  11. <img src="test3.jpg">
  12. </div>
  13.  
  14. <img src="left_arrow.gif" id="arr_left">
  15. <img src="right_arrow.gif" id="arr_right">
  16.  
  17. <script language="JavaScript">
  18. $(document).ready(function(){
  19.     $(‘#mytest’).cycle({
  20.     fx:     ’scrollHorz’,
  21.     prev:   ‘#arr_left’,
  22.     next:   ‘#arr_right’
  23. });
  24. });
  25. </script>
  26.  
  27. </body>
  28. </html>

Теперь разберёмся как работает Cycle для jQuery и что он умеет.

В моём примере блок с id=»mytest» будет подвергнут обрабтки плагином Cycle , для перехода между картинками будет применён эффект горизонтального перехода (то есть картинки будут меняться так, как в данном блоге),  а запускать скольжение картинок будут блоки с id=»arr_left» для перехода к предыдущей картинке и id=»arr_right» к следующей. Этого уже достаточно для того, чтобы картинки начали свои переходы, но есть дополнительные параметры.

Начнём со списка параметров Cycle, я предоставлю краткий вариант, полный можно найти по этой ссылке.
Эффект перехода между картинками:
fx: fade, zoom
fade: плавное исчезновение предыдущего слайда и появление нового
zoom: смена картинки засчёт изменения размеров исходного и конечного изображений

speed:1000
время в миллисекундах за которое слайды меняются

startingSlide: 0
номер слайда с которого должен начаться просмотр. Счёт начинается не с 1, а с 0
Это далеко не все парметры, но зачастую их будет хватать для той или иной задачи.

Немного об Easing plugin для jQuery: данный плагин помогает избежать «унылых» переходов между слайдами, простыми .hide() и ещё в некоторых моментах, заменяя скорость перехода и динамичность с простой линейной на различные другие. Примеры можно посмотреть вот тут. Для того, чтобы подключить easing в наш скрипт достаточно добавить

  1. <script language="JavaScript" src="./jquery.easing.js" ></script>

в <head>, а в подключении Cycle вписать параметром easing: easeInOutBounce (например).

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

jQuery 

Комментарии (4) »


  RSS комментариев этой записи.


Просто подписка на комментарии

  1. а ссылочку то на мануал по жыквери стоит поменять на api.jquery.com

    Comment от Smoke — 23.01.2009 @ 13:06

  2. Менять не стал, но добавил ещё одну, спасибо.

    Comment от ctepeo — 23.01.2009 @ 13:14

  3. Для #header пропишите в css overflow: hidden, т.к. сейчас элементу прописывается hidden скриптом по событию document.ready, как следствие – при обновлении страницы мы видим стопку картинок в шапке, загораживающие контент…

    Comment от Александр Дубовской — 10.04.2010 @ 01:13

  4. Александр, да, спасибо :) Знал о решении, но всё лень было. Есть ещё способ с preload’ом картинок, о нём думаю пост написать

    Comment от ctepeo — 10.04.2010 @ 12:02

Оставить комментарий


Сделано ctepeo на базе wordpress