В этом уроке мы рассмотрим виджет - "Скроллер изображений" на jQuery. Подобных виджетов существует немало, этот отличается тем, что прокрутка начинает происходить самостоятельно, после загрузки страницы, но направление прокрутки пользователь сможет задавать сам. Для начала предлагаю ознакомиться с демкой.
Пример
Теперь, когда цель ясна, можно приступить.
Прежде всего подключаем jQuery и таблицу стилей. Далее в нужном месте создаем HTML-код скроллера
Code
<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
Code
/* 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 или при загрузке страницы , пока не прогрузится скрипт (действительно при размещении нашего скрипта не между , а в конце страницы). Это нужно, чтобы картинки не выходили за пределы виджета. Если изображений будет больше, чем в примере, размеры и отступы в классе js-disabled img нужно будет подкорректировать.
Вдыхаем в виджет жизнь
Подключаем jQuery (версия 1.3 и выше, с более ранней работать не будет) и скрипт carousel.js. Сделать это можно либо после HTML-кода виджета или до (между тегами ). Весь код carousel.js приводить не буду (т.к. он достаточно большой и в плане настроек там почти ничего нет), рассмотрим часть кода, который меняет скорость передвижения:
Code
var duration = $(".wrapper").length * 3000;
Формула высчитывает продолжительность анимации, расчет идет от количество_картинок*3000 милисекунд. Таким образом, меняя параметр 3000 на любой другой, мы можем регулировать скорость анимации. Можно написать так:
Тогда продолжительность анимации не будет зависеть от количества картинок.
Вот и все. Удачи
Источник: ruseller.com
