Наверх
 

Навигация
Опрос
Есть ли на этом сайте что-нибудь полезное для Вас?
Да, конечно есть
Нет
Пока еще не нашел

База уроков » » » Слайдшоу с эффектами на HTML5 и jQuery

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

11 янв 2014 | Комментариев: 0 | Просмотров: 1820

Слайдшоу с эффектами на 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 - движение и остановка

Скачать файл Скачек: 15 | Размер: 263,5 Kb
Демо-версия


Теги: HTML5, jQuery, слайдшоу

Ссылка на новость:

    html-cсылка на публикацию
    BB-cсылка на публикацию
    Прямая ссылка на публикацию

ЕЩЕ НА ЭТУ ТЕМУ:

Красивый текст с тенью (Совместимый с Internet Explorer)

Красивый текст с тенью (Совместимый с Internet Explorer)

Красивый текст с тенью (Совместимый с Internet Explorer)
Иконка на внешнюю ссылку

Иконка на внешнюю ссылку

Иконка для внешней ссылки - используется jQuery плагин для показа внешней ссылки.
Красивый эффект анимации для галереи

Красивый эффект анимации для галереи

Эффект, который позволит преобразить вашу галерею фотографий, с помощью библиотеки Raphael и jQuery. Нужно создать три файла: index.html, default.css, init.js
Zoomy - красивый эффект лупы на изображении

Zoomy - красивый эффект лупы на изображении

Эффект лупы достигается благодаря использованию простого jQuery плагина Zoomy. Вам понадобятся две копии одного и того же изображения - первая - копия
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.