ЭФФЕКТ СЛАЙДШОУ НА HTML5 И JQUERY


ЭФФЕКТ СЛАЙДШОУ НА HTML5 И JQUERY


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

Разметка HTML
Подключаем js файлы:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" 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>


javascript
И в head подключаем скрипт для запуска плагина:
<script language="javascript" type="text/javascript">
            $(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'
                });
            });
        </script>


Настройки плагина:
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 - движение и остановка

Скачать исходник:
slideshow_canvas.rar


скрипт скрипт ЭФФЕКТ СЛАЙДШОУ НА HTML5 И JQUERY
Статистика
0  
Всего статей 1025
0  
Всего комментариев 57
0  
Пользователей 3333
Обновления new
  • XenForo Resource Manager 1.1.4
  • Что такое Менеджер ресурсов (Resource Manager)? Менеджер ресурсов является официальным дополнением для XenForo, которое позволяет управлять
  • Boss Electronues - Шаблон для OpenCart
  • И так, данный шаблон заточен под OpenCart. В данном шаблоне есть не свойственная для магазинов возможность писать блоги. В шаблон встроен блог от
  • R.Gen - Шаблон на OpenCart
  • R.Gen - это отличный премиум шаблон на OpenCart. Отличный дизайн, полностью настраиваемый и в тоже время простой в шаблон для создания серьезного
  • 30 psd логотипов на разные тематики
  • Эта сборка из 30 psd логотипов на разную тематику. Логотипы схематичные, яркие, детализированные, в отличном качестве и в формате PSD. Логотипы не
  • Xenu Программа для проверки битых ссылок
  • Xenu старенькая но очень полезная программа для поиска битых ссылок на сайте. Описание: Проверка ссылок делается на: ссылки, изображения, рамок,
Информация