Скрипты

stackposts-v1-5-–-social-marketing-tool Stackposts-это инструмент маркетинга в социальных сетях, который позволяет и помогает вам легко публиковать автоматические сообщения, планировать...
grameasy-2-0-nul-автоматическая-публикация-в-instagram Grameasy - это мощный программный инструмент, который помогает настроить вашу учетную запись Instagram на автопилот, круглосуточно заниматься лайками и...
live-chat-3-v3-7-онлайн-чат-поддержки Live Chat 3 - лучший способ помочь своим клиентам. Это намного быстрее, чем электронная почта и более эффективней, чем телефон. Не оставляйте своих...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Слайд шоу с плагином JQuery Flux Slider

Слайд шоу с плагином JQuery Flux Slider

В этом примере вы увидите возможности применения слайдер плагина Flux. Этот плагин использует CSS3 анимацию с разнообразными эффектами переходов как 2D так и 3D. Конечно не все браузеры имеют возможность отображать 3D переходы, это относиться к старым версиям, например Opera12.16 которая была последней на движке Presto. Но все новые браузеры использующие движок WebKit отлично показывают 3D эффекты.

 
 

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Flux Slider</title>
        <link rel="stylesheet" href="/css/main.css" type="text/css" />
        <script src="/js/jquery-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="/js/flux.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="/js/main.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="example">
            <h3><a href="#">Flux Slider</a></h3>

            <div id="slider">
                <img src="/data_images/pic1.jpg" alt="" />
                <img src="/data_images/pic2.jpg" alt="" />
                <img src="/data_images/pic3.jpg" alt="" />
                <img src="/data_images/pic4.jpg" alt="" />
                <img src="/data_images/pic5.jpg" alt="" />
                <img src="/data_images/pic6.jpg" alt="" />
                <img src="/data_images/pic7.jpg" alt="" />
                <img src="/data_images/pic8.jpg" alt="" />
                <img src="/data_images/pic9.jpg" alt="" />
                <img src="/data_images/pic10.jpg" alt="" />
            </div>

            <hr />
            <div id="transitions">
                <ul id="trans2D" class="transitions">
                    <li><b>2D Transitions</b></li>
                    <li><a href="#" id="bars">Bars</a></li>
                    <li><a href="#" id="zip">Zip</a></li>
                    <li><a href="#" id="blinds">Blinds</a></li>
                    <li><a href="#" id="blocks">Blocks</a></li>
                    <li><a href="#" id="concentric">Concentric</a></li>
                    <li><a href="#" id="warp">Warp</a></li>
                </ul>
                <ul id="trans3d" class="transitions">
                    <li><b>3D Transitions</b></li>
                    <li><a href="#" id="bars3d">Bars3D</a></li>
                    <li><a href="#" id="cube">Cube</a></li>
                    <li><a href="#" id="tiles3d">Tiles3D</a></li>
                    <li><a href="#" id="blinds3d">Blinds3D</a></li>
                </ul>
                <ul id="controls">
                    <li><b>Controls</b></li>
                    <li><a href="#" id="start">Play</a></li>
                    <li><a href="#" id="stop">Pause</a></li>
                    <li><a href="#" id="next">Next</a></li>
                    <li><a href="#" id="prev">Prev</a></li>
                </ul>
            </div>
            <div id="warn" style="display:none"></div>
        </div>
    </body>
</html>

CSS

Основные css стили в которых вы можете изменить визуальные настроики слайдера, поля, рамки фон.

body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

/*customization of slider*/

#slider {
    padding:15px 0;
}
#slider .pagination {
    list-style:none outside none;
    padding:15px !important;
}
#slider .pagination li {
    cursor:pointer;
    display:inline-block;
    margin-left:0;
    background-color:#888;
    border-radius:10px 10px 10px 10px;
    height:8px;
    text-indent:10000px;
    width:8px;
}
#slider .pagination li.current {
    background-color:#000;
}
#transitions {
    overflow:hidden;
}
#transitions ul {
    float:left;
    list-style:none outside none;
    padding:0;
    width:33%;
}
#transitions ul#trans2D {
    text-align:right;
}
#transitions ul li {
    margin:0 10px;
}

#warn {
    font-weight:bold;
    text-align:center;
}

JavaScript

$(function(){
    // если браузер не поддерживает CSS3 анимацию - мы будем показывать сообщение об этом
    if (! flux.browser.supportsTransitions) {
        $('#warn').text('Необходим браузер который поддерживает CSS3 анимацию').show();
    }

    window.mf = new flux.slider('#slider', {
        autoplay: true,
        pagination: true,
        delay: 5000
    });

    // binding onclick events for our transitions
    $('.transitions').bind('click', function(event) {
        event.preventDefault();

        // если браузер не поддерживает 3D эффекты - мы будем показывать сообщение об этом
        if ($(event.target).closest('ul').is('ul#trans3d') && ! flux.browser.supports3d) {
            $('#warn').text("The '"+event.target.innerHTML+"' Необходим браузер который поддерживает 3D эффекты");
            $('#warn').animate({
              opacity: 'show'
            }, 1000, '', function() {
                $(this).animate({opacity: 'hide'}, 1000);
            });
            return;
        }

        // using custom transition effect
        window.mf.next(event.target.id);
    });

    $('#controls').bind('click', function(event) {
        event.preventDefault();

        var command = 'window.mf.'+event.target.id+'();';
        eval(command);
    });
});

С помощью вызова конструктора new flux.slider производим инициализацию, как параметр указываем селектор нашего слайдера (‘#slider’) и параметры autoplay, pagination, delay.



  1. Комментарии (0)

  2. Добавить свои

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

There are no comments posted here yet

Оставьте свой комментарий

Posting comment as a guest. Sign up or login to your account.
Вложения (0 / 3)
Share Your Location

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...