4 002 Скрипты / Slider

Эффект слайдшоу на HTML5 и jQuery

Эффект слайдшоу на HTML5 и jQuery

Слайдшоу - HTML5 + jQuery плагин

HTML

Подключаем js файлы:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/jаvascript" src="js/webwidget_slideshow_html5_simple.js"></script>

Добавляем HTML код:

<div id="webwidget_slideshow_html5_simple">
  <ul>
    <li>
      <a href="#"><img src="images/slideshow_large_1.jpg" alt="Осень" /></a>
    </li>
    <li>
      <img src="images/slideshow_large_2.jpg" alt="Лес" />
    </li>
    <li>
      <a href="#"><img src="images/slideshow_large_3.jpg" alt="Море" /></a>
    </li>
    <li>
      <a href="#"><img src="images/slideshow_large_4.jpg" alt="Пальма" /></a>
    </li>
    <li>
      <a href="#"><img src="images/slideshow_large_1.jpg" alt="Осень" /></a>
    </li>
    <li>
      <a href="#"><img src="images/slideshow_large_2.jpg" alt="Лес" /></a>
    </li>
    <li>
      <a href="#"><img src="images/slideshow_large_3.jpg" alt="Море" /></a>
    </li>
    <li>
      <a href="#"><img src="images/slideshow_large_4.jpg" alt="Пальма" /></a>
    </li>
    <li>
      <a href="#"><img src="images/slideshow_large_1.jpg" alt="Осень" /></a>
    </li>
    <li>
      <a href="#"><img src="images/slideshow_large_2.jpg" alt="Лес" /></a>
    </li>
  </ul>
</div>

JS

И в head подключаем скрипт для запуска плагина:

$(function() {
  $("#webwidget_slideshow_html5_simple").webwidget_slideshow_html5_simple({
    slideshow_transition_effect: 'Mosaic,Wipe_from_horizontal_blind,Wipe_from_vertical_blind,Wipe_from_vertical_center,Wipe_from_horizontal_center,Wipe_to_horizontal_center,Wipe_to_vertical_center,Wipe_from_bottom_to_top,Wipe_from_top_to_bottom,Wipe_from_right_to_left',
    slideshow_time_interval: '4000',
    slideshow_window_width: '550',
    slideshow_window_height: '343',
    slideshow_background_color: '#FFF',
    slideshow_border: '#999 solid 2px',
    text_effect: 'text_rebound'
  });
});

Настройки плагина:
slideshow_transition_effect: эффекты которые будут использованы для переходов между изображениями
slideshow_time_interval: интервал времени смены слайда в мс
text_effect: Используемый эффект над текстом (описание картинки - параметр ALT="")

  • text_nothing - без эффекта, с тенью
  • text_color - радужный цвет
  • text_fade - появляющийся текст
  • text_jump - прыгающие буквы
  • text_rebound - отскакивание
  • text_typewriter - пишущая машинка
  • text_whirl - вращение
  • text_run - движение
  • text_runin - движение и остановка
Скачать 1282Загрузок 232,81 Kb
Демо

Комментарии

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

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