background
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Слайдер с элементом HTML5 Саnvas

Слайдер HTML5
Просмотров: 1854  Скачан: 245 раз  Комментариев в теме: 0

Слайдер для сайта построенный с применением элемента HTML5 Саnvas, этот элемент позволяет создавать и изменять некоторую графику, так же его можно использовать в сочетании с jQuery, таким образом приминаются специальные фильтры к изображению, для более высокой контрастности и яркости цвета, в результате чего, получается красивый эффект при переходе.

Данный слайдер является кроссбраузерным, это значить, что он работает во всех браузерах, (но в браузере Chrome, он работать не хочет, возможно из за библиотеки jQuery).

Шаг 1 - создание разметки

 

HTML

<div id="slideshow">
    <ul class="slides">
        <li><img src="images/1.jpg" width="765" height="420" alt="Marsa Alam underawter close up" /></li>
        <li><img src="images/2.jpg" width="765" height="420" alt="Turrimetta Beach - Dawn" /></li>
        <li><img src="images/3.jpg" width="765" height="420" alt="Power Station" /></li>
        <li><img src="images/4.jpg" width="765" height="420" alt="Colors" /></li>
        <li><img src="images/5.jpg" width="765" height="420" alt="Colors of Nature" /></li>
    </ul>
    <span class="arrow previous"></span>
    <span class="arrow next"></span>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
<script type="text/javascript">
$(window).load(function(){
    var timeOut = null;
    $('#slideshow .arrow').click(function(e,simulated){
        if(!simulated){
            clearTimeout(timeOut);
        }
    });
    (function autoAdvance(){
        $('#slideshow .next').trigger('click',[true]);
        timeOut = setTimeout(autoAdvance,5000);
    })();
});
</script>
Материалы по теме:

Аккордеон на css3 и jqueryАккордеон на css3 и jquery

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....

Компактный новостной Rotator на jqueryКомпактный новостной Rotator на jqu...

Если вам нужно вывести новости на вашем сайте, и вы хотите что бы это было привлекательно и в тоже время компактно......

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews ...

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery ...

Красивая адаптивная карусель для вашего сайта, а если быть точнее, то это плагин «Elastislide», особенности такого плагина, заключаются в умении адапт...

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css...

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi...

Стильный мульти слайдер с красивым эффектом, отлично подойдёт для интернет магазина, несомненно идея при создании этого слайдера, была взята в Aplle.....
Интересные публикации:

3D Контактная форма на css33D Контактная форма на css3

Красивая контактная форма в довольно оригинальном стиле. Контактная форма имеет вид почтового конверта, когда вы кликаете по нём, он......

Галерея на jQueryГалерея на jQuery

В галерее используется потрясающий эффект раскрытия картинки, когда вы нажимаете на картинку, она как бы собирается по......

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......

Социальные кнопки с помощью cssСоциальные кнопки с помощью css

Социальные кнопки с применением иконического шрифта....

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....

Sooshal v2.4Sooshal v2.4

Sooshal - это первая в режиме реального времени, социальная и не социальная медиа поисковая система, которая использует новейшие данные с помощью 10 р...

Радиоактивные кнопкиРадиоактивные кнопки

Красивые кнопки с эффектом радиации. Так, как на данный момент не все браузеры поддерживают свойство webkit, то такой эффект будет работать только......
  • Текущий 1.67/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.7/5( Голосов 9 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить