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

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

ОБСУЖДЕНИЕ

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

Слайдер HTML5
Просмотров: 1717  Скачан: 222 раз  Комментариев в теме: 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>
Материалы по теме:

JQuery плагин с навигацией в виде слайдераJQuery плагин с навигацией в виде с...

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....

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

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

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

Полноэкранное слайд-шоу с помощью JQuery плагинаПолноэкранное слайд-шоу с помощью J...

Jquery плагин «SuperSized», плагин можно использовать в ранних направлениях, одно с таких, это полно-экранное слайд-шоу....

Таблица тарифных плановТаблица тарифных планов

Таблица тарифных планов нужна любому крупному проекту, если у вас успешный проект, то вам рано или поздно, понадобиться вывести ваши собственные тариф...

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Inf...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...

Стильный слайдер на jQuery «Mobilyslider»Стильный слайдер на jQuery «Mobilys...

Стильный слайдер на jquery, а если быть точнее, то это плагин «MobilySlider» имеющий размер всего в 5kb, слайдер довольно привлекательный с виду, име...
Интересные публикации:

Прозрачная контактная форма на css3Прозрачная контактная форма на css3

Прозрачная контактная форма на CSS3 в тёмном стиле. В форме реализована проверка полей......

Социальные иконки на css3Социальные иконки на css3

Социальные иконки на css3, при наведении курсора на иконку, она делается полупрозрачной....

Horse ClubHorse Club

Лёгкий html шаблон в тёмных тонах, посвящённый верховой езде и всему что с этим связано. В шаблоне имеется красивый слайдер и галерея......

Cumico v1.4Cumico v1.4

Универсальная премиум тема для WordPress с адаптивной вёрсткой и стильным дизайном. Возможность подключить Woocommerce это идеальное решение для......

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

FlavorFlavor

Flavor - это мощная тема для wordpress которая укомплектована огромным функционалом и включает в себя все возможности для организации полноценного ин...
  • Текущий 1.75/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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