jQuery: слайдшоу с помощью Cycle Plugin

Сегодня поговорим о том, как, используя библиотеку jQuery и плагин Cycle Plugin, создать небольшое слайдшоу. Это могут быть новости, изображения, различные виджеты и т.п.

<div id="container">
  <a id="prev" href="" title="">?</a>
  <a id="next" href="" title="">?</a>
  <div id="content">
    <div class="contbox">
      <!-- Контент  -->
    </div>
    <div class="contbox">
      <!-- Контент  -->
    </div>
 
    <!-- При необходимости добавьте дополнительные блоки -->
 
  </div>
</div>

#prev и #next используются для прокрутки, можно также включить автозапуск. Содержимое находится в блоках с классом contbox.

#container{
  width:500px;
  margin:20px auto 0 auto
}
#prev, #next{
  display:block;
  width:50%;height:40px;
  text-align:center;
  color:#fff;
  font:2em/35px Arial, Helvetica, sans-serif;
  text-decoration:none;
  background:#757364
}
#prev:hover, #next:hover{
  background:#D9AA81
}
#prev{
  float:left
}
#next{
  float:right
}
#content{
  background:#E6E6D1;
  clear:both
}
  #content .contbox{
    padding:10px;
    width:480px
}

Подключаем следующие файлы в head:

<!-- Библиотека jQuery -->
<script type="text/javascript" src="jquery.js"></script>
 
<!-- Плагин jQuery Cycle Plugin -->
<script type="text/javascript" src="jquery.cycle.js"></script>
 
<!-- Плагин jQuery Easing Plugin -->
<script type="text/javascript" src="jquery.easing.js"></script>

jQuery Easing Plugin необходим для использования дополнительных эффекты перехода. Нужный эффект передаётся в значении параметра easing. В данном примере используется эффект easeInOutExpo

<script type="text/javascript">
  jQuery(window).bind("load", function() {
    $('#content').cycle({ 
      fx:     'scrollHorz',
      prev:   '#prev',
      next:   '#next',
      height: 250,
      timeout: 0,
      easing: 'easeInOutExpo'
    });
  });
</script>

Обсуждение:

Алексей Павлов 21 Ноя 2008

У меня в Файрфоксе 2.0.0.18 при загрузке вначале на мгновение отображаются те слайды, которых я видеть не должен.

Ответить
Alex 21 Ноя 2008

Алексей, у меня также. Скорее всего это задержка из-за загрузки файлов библиотеки и плагина. Думаю если прописать высоту у блока #content в CSS, то этого не будет.

Ответить
mxat0488 11 Дек 2008

У меня вообще появляются какие-то строчки и ничего не ясно что там!

Ответить
asse 24 Янв 2009

очень интересный эффект. расстраивает только это секундное появление всех дивов = (

Ответить
Тук 22 Май 2009

Спасибо, очень интересно

Ответить
Leon 29 Май 2009

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

Потом его показать
document.getElementById(«content»).style.visibility=’visible’;

Ответить
karl 7 Авг 2009

Можно же overflow:hidden поставить

Ответить
V0van 21 Сен 2009

Здравствуйте.
Большое спаисбо за статью. Очень интересный плагин.
А не подскажете — как организовать загрузку этих перелистываемых блоков с помощью аякса? Согласитесь, подгружать по необходимости было бы намного практичнее, чем грузить все сразу на страницу.

Ответить
Обнинск 11 Ноя 2009

Забавная штука
А подгружать можно данные с помощью ajax через inner html, дописывая блок к старому

Ответить
V0van 13 Ноя 2009

Да, нащет аякса надо будет поэкспериментировать.
Кстати, пару дней назад наткнулся — http://www.modernstudio.net/ — тут весь сайт сделан таким способом. Там правда используется не эта библиотека, но принцип тотже. Очень даже неплохо смотрится..

Ответить
anadikt 16 Янв 2010

спасибо огромное, давно думал как уменьшить место на сайте, которое занимают новости… теперь они в маленьком блоке и можно их листать) прикольно для пользователе, и для меня удобно!!!

Ответить
Alex 26 Сен 2010

Чтобы не было этого секундного появления всех дивов, поставьте для каждого из них style=»display:none».

Ответить