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

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

ОБСУЖДЕНИЕ

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

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

Аккордеон изображенийАккордеон изображений с помощью css...

Красивый горизонтальный аккордеон для вывода изображений на сайте....

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

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

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

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

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro ...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid ...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

Kenburner слайдерKenburner слайдер

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

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

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

Admin PanelAdmin Panel

Шаблон для панели администратора созданный на HTML5, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

Горизонтальное мульти менюГоризонтальное мульти меню

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

Облако теговОблако тегов на css

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

Web HostingWeb Hosting

Современный html шаблон хостинг провайдера с готовым набором нужных страниц, имеется таблица тарифных планов, контактная форма....

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

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

ConsultingConsulting

Красивый html шаблон с прекрасной графикой, иконками и меню, хорошо подойдёт для бизнес проекта, в шаблоне имеется необычный слайдер......

Softdate Pro v1.3Softdate Pro v1.3

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

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

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

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


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