Скроллер изображений на jQuery

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

Теперь, когда цель ясна, можно приступить.

Прежде всего подключаем jQuery и таблицу стилей. Далее в нужном месте создаем HTML-код скроллера

<head>   
    <link rel="stylesheet" type="text/css" href="imageScroller.css">   
 </head>   
  <body>   
    <div id="outerContainer">   
      <div id="imageScroller">   
      <div id="viewer" class="js-disabled">   
        <a class="wrapper" href="http://www.apple.com" title="Apple"><IMG class="logo" id="apple" src="logos/apple.jpg" alt="Apple">   
        <a class="wrapper" href="http://mozilla-europe.org/en/firefox" title="Firefox"><IMG class="logo" id="firefox" src="logos/firefox.jpg" alt="Firefox">   
        <a class="wrapper" href="http://jquery.com" title="jQuery"><IMG class="logo" id="jquery" src="logos/jquery.jpg" alt="jQuery">   
        <a class="wrapper" href="http://twitter.com" title="Twitter"><IMG class="logo" id="twitter" src="logos/twitter.jpg" alt="Twitter">   
        <a class="wrapper" href="http://jqueryui.com" title="jQuery UI"><IMG class="logo" id="jqueryui" src="logos/jqueryui.jpg" alt="jQuery UI">   
      </div>   
      </div>   
    </div>

Как мы видим виджет состоит из нескольких вложенных div-контейнеров и картинок, которые "завернуты" в ссылки.

CSS

/* js-disabled class - устанавливает размер изображений, чтобы они все всписывались в виджет  */
.js-disabled img { width:100px; height:100px; display:block; float:left; margin:30px 0 0; }
#outerContainer { width:542px; height:202px; margin:auto; position:relative; } /*  контейнер виджета */
#imageScroller { width:542px; height:202px; position:relative; background:#000000 ; }
#viewer { width:522px; height:182px; overflow:hidden; margin:auto; position:relative; top:10px; }
#imageScroller a:active, #imageScroller a:visited { color:#000000; }
#imageScroller a img { border:0; }
#controls { width:534px; height:47px; background:#000; position:absolute; top:4px; left:4px; z-index:10} /* Плашка под кнопками */
#controls a { width:37px; height:35px; position:absolute; top:3px; }
#controls a:active, #controls a:visited { color:#0d0d0d; }
#title { color:#ffffff; font-family:arial; font-size:100%; font-weight:bold; width:100%; text-align:center; margin-top:10px; }/* Кнопка вправо */
#rtl { background:url(images/rtl.png) no-repeat; left:100px; } 
#rtl:hover { background:url(images/rtl_over.png) no-repeat; left:99px; }
#ltr { background:url(images/ltr.png) no-repeat; right:100px; }/* Кнопка влево*/
#ltr:hover { background:url(images/ltr_over.png) no-repeat; }

Большая часть кода - это просто стилевое описание для красоты и наглядности. Важным здесь является #viewer - он скрывает изображения, которые еще не показаны, либо уже прошли. И еще один класс на котором мы заострим внимание - это класс js-disabled img. Он устанавливает принудительно размер картинок (в примере 100х100 px) при выключенном JS или при загрузке страницы , пока не прогрузится скрипт (действительно при размещении нашего скрипта не между <head>, а в конце страницы). Это нужно, чтобы картинки не выходили за пределы виджета. Если изображений будет больше, чем в примере, размеры и отступы в классе js-disabled img нужно будет подкорректировать.

Вдыхаем в виджет жизнь
Подключаем jQuery (версия 1.3 и выше, с более ранней работать не будет) и скрипт carousel.js. Сделать это можно либо после HTML-кода виджета или до (между тегами <head>). Весь код carousel.js приводить не буду (т.к. он достаточно большой и в плане настроек там почти ничего нет), рассмотрим часть кода, который меняет скорость передвижения:

 var duration = $(".wrapper").length * 3000;

Формула высчитывает продолжительность анимации, расчет идет от количество_картинок*3000 милисекунд. Таким образом, меняя параметр 3000 на любой другой, мы можем регулировать скорость анимации. Можно написать так:

 var duration =  3000;

Тогда продолжительность анимации не будет зависеть от количества картинок.

Вот и все. Удачи!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: net.tutsplus.com
Перевел: Евгений Стыценков
Урок создан: 1 Мая 2009
Просмотров: 50014
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^