22 050 Скрипты / Slider

Прокрутка изображений

Горизонтальная или вертикальная прокрутка миниатюр изображений. Использует jQuery и опционально easing плагин для эффектов.

HTML

Рассмотрим на примере первой Демки.

CSS

Только для Демо 1:

#outer_container{margin:60px auto; width:600px; padding:0 10px; background:#000; border:1px solid #999;}
#thumbScroller{position:relative; margin:auto;}
#thumbScroller{width:600px;}
#thumbScroller, #thumbScroller .container, #thumbScroller .content{height:170px;}
#thumbScroller{overflow:hidden;}
#thumbScroller .container{position:relative; left:0;}
#thumbScroller .content{width:260px; float:left;}
#thumbScroller .content div{padding:10px 15px; height:100%; font-family:Verdana, Geneva, sans-serif; font-size:13px;}
#thumbScroller img{border:5px solid #fff;}

jаvascript

Подключаем в шапке jQuery, в некоторых демках, дополнительно подключается плагин easing:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

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

Для вертикального варианта прокрутки, скрипт будет несколько другим.

Скачать 2782Загрузок 171,24 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи