Карусель для сайта

Просмотров: 6547Комментарии: 3
ПрограммированиеJavascript
Карусель для сайта

Сегодня мы научимся создавать анимационную карусель для сайта. Карусель - это панель которая отображает изображения или даже текст (html) с прокруткой влево и вправо, либо с пагинацией элементов карусели. Для перехода между элементами карусели используется анимация гладкого скольжения.

Для создания карусели нам понадобиться скрипт Step Carousel Viewer

Некоторые возможности этого ява-скрипта:

  • Элементы карусели могут быть размещены непосредственно на странице или загружаться с помощью Ajax с внешних файлов.
  • Автоматическая прокрутка карусели с заданной скоростью и ее остановка при наведении курсора мыши.
  • Возможность задать изображения для кнопок вперед и назад.
  • Автоматическая генерация нумерации страниц на основе общего количества элементов, и возможность разместить ее в любой части страницы.

Установка на сайт:

1. Подключить скрипты карусели между тегами head вашего шаблона CMS. А также свои стили карусели.

<head>
...
//Подключение JQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.3.2/jquery.min.js"></script>
//Скрипт самой карусели
<script type="text/javascript" src="stepcarousel.js"></script>
//Стили
<style type="text/css">
.stepcarousel{
position: relative; /* не изменять */
overflow: scroll;
width: 270px; /* Ширина карусели */
height: 200px; /* Высота карусели */
}
.stepcarousel .belt{
position: absolute; /* не изменять */
left: 0; top: 0;
}
.stepcarousel .panel{
float: left;
overflow: hidden;
width: 250px; /* Ширина каждой панели. */
}
</style>
</head>

2. Скрипт инициализации карусели, лучше добавить его перед закрывающим тегом body

<script type="text/javascript">
stepcarousel.setup({
	galleryid: 'mygallery', //ид(id) блока div в которой содержится вся карусель
	beltclass: 'belt', //класс(class) внутреннего блока div содержащий элементы карусели
	panelclass: 'panel', //класс(class) панели div содержащий каждый элемент карусели
	autostep: {enable:true, moveby:1, pause:3000}, //автопрокрутка каждые 3 сек на один шаг
	panelbehavior: {speed:500, wraparound:false, persist:true}, //анимация
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://siteurl/left.gif', -5, 80], rightnav: ['http://siteurl/right.gif', -20, 80]}, //отображение кнопок вперед и назад и шаг при нажатии
	statusvars: ['statusA', 'statusB', 'statusC'], //переменные текущей стр, всего стр.
	contenttype: ['inline'] //содержимое ajax или внутри 
        //['inline'] или ['ajax', 'path_to_external_file']
})
</script>

panelbehavior описание свойств:

speed - продолжительность анимации

wraparound - возвращаться ли к первому слайду, при достижении последнего слайда

persist - запоминать ли последний показанный слайд пользователю сессии и показывать по возвращению

3. Сами блоки карусели размещаются в нужном месте шаблона, пример:

<div id="mygallery" class="stepcarousel">
 <div class="belt">
  // элементы карусели
  <div class="panel">//1
   <img src="http://siteurl/image1.jpg" />
  </div>
  <div class="panel">//2
   <img src="http://siteurl/image1.jpg" />
  </div>
  <div class="panel">//3
   <img src="http://siteurl/image1.jpg" />
  </div>
 </div>
</div>
//Доп.информация
<b>Текущая:</b> <span id="statusA"></span>
<b style="margin-left: 30px">Всего:</b> <span id="statusC"></span>

//Пагинация в виде изображений.
<p id="mygallery-paginate" style="width: 250px; text-align:center">
<img src="opencircle.png" data-over="graycircle.png" data-select="closedcircle.png" data-moveby="1" />


<a href="javascript:stepcarousel.stepBy('mygallery', -1)">Шаг назад</a>
<a href="javascript:stepcarousel.stepBy('mygallery', 1)">Шаг вперед</a> 
<a href="javascript:stepcarousel.stepTo('mygallery', 1)">К первой</a>
<a href="javascript:stepcarousel.stepBy('mygallery', 2)">На две вперед</a>

Для автоматического создания пагинации слайдов id должен совпадать с id главной div панели карусели с добавлением -paginate. В примере mygallery, а для пагинации mygallery-paginate. Внутри тега img свойства тега:

data-over - при наведении

data-select - выбранный слайд

src - для не выбранных

Команды карусели

stepBy(name, step) - переход на step количество слайдов name карусели.

stepTo(name, item) - переход к определенном item слайду карусели.

Пример работы скрипта можно видеть над этой статьей.

Скачать stepcarousel.js

Комментариев: 3 RSS

1 Рита 23-08-2011 12:15

А возможно подключить прокрутку при помощи скрола мыши?

3 ImLoaD 22-09-2011 02:41

Как же невозможно? Javascript'ом можно, хоть и с геморроем, а с Flash запросто, учитесь с Google

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

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.

     

  

Если вы уже зарегистрированы как комментатор или хотите зарегистрироваться, укажите пароль и свой действующий email. При регистрации на указанный адрес придет письмо с кодом активации и ссылкой на ваш персональный аккаунт, где вы сможете изменить свои данные, включая адрес сайта, ник, описание, контакты и т.д., а также подписку на новые комментарии.

(обязательно)