Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Последние темы форума

Показать новые сообщения »

Почтовая рассылка

Подписчиков: 11888
Последний выпуск: 19.06.2015

JQuery слайдер

Автор: Mikhail Krivyy
7 февраля 2013 года 

Последнее время большую популярность приобрели движущиеся горизонтальные панели, известные также как "Слайдеры" или "Карусели". Оно и понятно, это простой и очень эффективный метод  привлечь внимание пользователя. Слайдеры позволяют активнее влиять на поведение пользователей на сайте и продвигать необходимые материалы.

На сегодняшний день существуют сотни, если не тысячи готовых скриптов и модулей для организации слайдера. Вы можете вбить в Google строку "JQuery slider" и найдете десятки обзоров с ссылками на сотни готовых модулей "слайдеров" и "каруселей".

Основная проблема всех готовых модулей - универсальность, громоздкость и, иногда, сложность настройки. Создать слайдер с нуля, иногда, проще чем настроить готовый модуль, ибо простой слайдер - это лишь пара строк кода на JavaScript. 

В этой небольшой заметке я покажу как с нуля создать свой слайдер.

Слайдер с точки зрения HTML верстки

С точки зрения HTML верстки слайдер состоит из двух основных частей - "окна" отображения (viewport) и основного содержимого, состоящего из нескольких слайдов. Ширина одного слайда обычно равна ширине окна отображения. Остальные слайды, не влазят в окно отображения просто не видны.

Ниже приведен пример самого простого слайдера с описанием в комментариях.

Код:
<!-- Таблица стилей для элементов слайдера -->
<style type="text/css">

/* Основной контейнер для всех элементов слайдера. Его размеры 640x400*/
#slider {width:638px;height:400px;}

/* Фиксированный контейнер прокручиваемых элементов слайдера */
#slider_container {width:638px;height:500px;position:absolute;overflow:hidden;}

/* Плавающий контейнер прокручиваемых элементов слайдера. Ширина задается в свойстве style. */
#slider_moving_container {position:absolute;left:0px;}

/* Элемент слайдера. В этом примере можно было бы просто использовать изображение, но мы то пойдем дальше */
.slider_element {cursor:pointer;width:640px;height:500px;position:absolute;}
</style>

<!-- HTML верстка слайдера -->

<!-- Основной контейнер -->
<div id="slider">

    <!-- Фиксированный контейнер -->
    <div id="slider_container">

        <!-- Плавающий контейнер -->
        <div id="slider_moving_container">

            <!-- Слайд №1. Вместо div можно было бы использовать просто изображение, но в слайды нужно будет вставить текст. -->
            <div class="slider_element" onclick="location.href='http://www.codenet.ru/cat/WEB-Development/HTML/';" id="slider_1" style="left:0;background-image: url('/np-includes/upload/2013/02/06/131036_original.jpg');">
            </div>

            <!-- Слайд №2 -->
            <div class="slider_element" onclick="location.href='http://www.codenet.ru/cat/Languages/PHP/';" id="slider_2" style="left:640px;background-image: url('/np-includes/upload/2013/02/06/131037_original.jpg');">
            </div>

            <!-- Слайд №3 -->
            <div class="slider_element" onclick="location.href='http://www.codenet.ru/cat/Languages/JavaScript/';" id="slider_3" style="left:1280px;background-image: url('/np-includes/upload/2013/02/06/131038_original.jpg');">
            </div>

        </div>
    </div>
</div>

</body>
</html>

HTML код отобразит слайдер, но этого мало. Слайды должны автоматические меняться через некоторое время. Эта небольшая программа на JavaScript раз в 10 секунд меняет слайдер на очередной.

Код:
var slider_position=1;  // Номер текущего слайда
var slider_total=3; // Общее количество слайдов

function slider_auto_run() {
    setTimeout(function() {

        // Переход к следующему слайду
        slider_position++;

        // Переход от последнего к первому слайду
        if (slider_position>slider_total) slider_position=1;

        // Сдвиг слайда и анимация с помощью JQuery animate()
        $('#slider_moving_container').animate({left: -((slider_position-1)*640)+'px'});

        // Повтор
        slider_auto_run();
        }, 10000); /* Каждый 10 секунд */
    };

slider_auto_run();

Результат работы примера можно посмотреть на демо-странице.

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

Код:
<!-- Таблица стилей -->

<style type="text/css">
<!-- Общие стили слайдера (см. первый пример -->
#slider {width:638px;height:500px;}
#slider_container {width:638px;height:500px;position:absolute;overflow:hidden;}
#slider_moving_container {position:absolute;left:0px;}
.slider_element {cursor:pointer;width:640px;height:500px;position:absolute;}

<!-- Стили для стрелок навигации вправо и влево -->
#slider_right {width:25px;height:51px;display:block;background-image: url('/np-includes/upload/2013/02/06/131040.png');float:right;margin:265px 0 0 615px;position:absolute;}
#slider_left {width:25px;height:51px;display:block;background-image: url('/np-includes/upload/2013/02/06/131039.png');float:left;margin-top:265px;position:absolute;}

<!-- Стили для текстов подписей -->
#slider_info {background:#333;height:132px;width:596px;display:block;padding:22px 32px 0 32px;margin-top:346px;}
#slider_title {font-family:times; font-size:30px;color: #ffc;text-decoration:none;display:block;margin:0;}
#slider_description {font-size:12px;color:white;text-decoration:none;display:block;margin:7px 0 0 0;}
#slider_hint {font-size:11px;color:#ccc;margin:2px 0 0 0;}
</style>

</head>

<body style="font-family:arial;font-size:12px;">

<div id="slider">
    <div id="slider_container">
        <div id="slider_moving_container">

            <!-- Слайд №1 -->
            <div class="slider_element" onclick="location.href='http://www.codenet.ru/cat/WEB-Development/HTML/';" id="slider_1" style="left:0;background-image: url('/np-includes/upload/2013/02/06/131036_original.jpg');">
                <!-- Текст подписи слайда -->
                <div id="slider_info">
                    <a href="http://www.codenet.ru/cat/WEB-Development/HTML/" id="slider_title">Невский Экспресс</a>
                    <a href="http://www.codenet.ru/cat/WEB-Development/HTML/" id="slider_description">Электровоз ЧС200-004 с поездом "Невский Экспресс". Станция Рябово. Скорость 160 км/ч. Февраль 2013 года.</a>
                </div>
            </div>

            <!-- Слайд №2 -->
            <div class="slider_element" onclick="location.href='http://www.codenet.ru/cat/Languages/PHP/';" id="slider_2" style="left:640px;background-image: url('/np-includes/upload/2013/02/06/131037_original.jpg');">
                <!-- Текст подписи слайда -->
                <div id="slider_info">
                    <a href="http://www.codenet.ru/cat/WEB-Development/HTML/" id="slider_title">Санкт-Петербург - Брянск</a>
                    <a href="http://www.codenet.ru/cat/WEB-Development/HTML/" id="slider_description">Электровоз ЧС2Т-1026 с поездом Санкт-Петербург - Брянск. Перегон Чудово-Московское - Гряды. В районе платформы Дубцы. Скорость 100 км/ч. Февраль 2013 года.</a>
                </div>
            </div>

            <!-- Слайд №3 -->
            <div class="slider_element" onclick="location.href='http://www.codenet.ru/cat/Languages/JavaScript/';" id="slider_3" style="left:1280px;background-image: url('/np-includes/upload/2013/02/06/131038_original.jpg');">
                <!-- Текст подписи слайда -->
                <div id="slider_info">
                    <a href="http://www.codenet.ru/cat/WEB-Development/HTML/" id="slider_title">"Сапсан"</a>
                    <a href="http://www.codenet.ru/cat/WEB-Development/HTML/" id="slider_description">Электропоезд ЭВС1-005 "Сапсан" и электровоз ЧС2Т-1014 с поездом Санкт-Петербург - Ижевск. Перегон Чудово-Московское - Гряды. В районе платформы Дубцы. Скорость 100 км/ч. Февраль 2013 года.</a>
                </div>
            </div>

        </div>
    </div>

    <!-- Элементы навигации по слайдам -->
     
    <a href="#" id="slider_right"></a>
    <a href="#" id="slider_left"></a>
</div>

Код автоматической смены слайдов немного изменился из-за реализации ручного управления (стрелки "влево" и "вправо"). Если пользователь по клику сменил слайд, то автоматическая смена слайдов выключается.

Код:
var slider_position=1;  // Номер текущего слайда
var slider_total=3; // Общее количество слайдов
var slider_auto=true;   // Автоматическая смена слайдов - true, ручная смена слайдов - false

// Обработчик клика по навигационной стрелке "вправо".
$('#slider_right').click(function() {

    // Выключение автоматической смена слайдов
    slider_auto=false;

    // Переход к следующему слайду
    slider_position++;

    // Переход к первому слайду, если слайды закончились
    if (slider_position>slider_total) slider_position=1;

    // Смена слайда с анимацией
    $('#slider_moving_container').animate({left: -((slider_position-1)*640)+'px'});

    return false;
    });

$('#slider_left').click(function() {

    // Выключение автоматической смена слайдов
    slider_auto=false;

    // Переход к предыдущему слайду
    slider_position--;

    // Переход к последнему слайду, если необходимо
    if (slider_position<1) slider_position=slider_total;

    // Смена слайда с анимацией
    $('#slider_moving_container').animate({left: -((slider_position-1)*640)+'px'});

    return false;
    });

// Автоматическая смена слайдов. См. предыдущий пример.
function slider_auto_run() {
    setTimeout(function() {

        // Если включено ручное управление слайдами, то ничего не делать
        if (!slider_auto) return;
        slider_position++;
        if (slider_position>slider_total) slider_position=1;
        $('#slider_moving_container').animate({left: -((slider_position-1)*640)+'px'});
        slider_auto_run();
        }, 10000);
    };

slider_auto_run();

Результат работы примера можно посмотреть на демо-странице.

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

Комментарий:
можно использовать BB-коды
Максимальная длина комментария - 4000 символов.
 

Комментарии

1.
95K
19 июня 2015 года
Reebok Puma
0 / / 19.06.2015
Мне нравитсяМне не нравится
19 июня 2015, 19:25:58
Почему скрипт работает только в теле страницы,а в отдельном (.js) файле работает на половину,т.е. только автоматическая прокрутка,а ручная не работает,пожалуйста обьясните
1.1.
4
01 октября 2002 года
mike
3.7K / / 01.10.2002
Мне нравитсяМне не нравится
20 июня 2015, 09:58:05
Скорее всего, потому что в таком случае скрипт грузится до того как загрузилась страница. Нужно запускать установку обработчиков через $(document).ready(function() {...});
2.
90K
05 апреля 2013 года
Микола Олександрович
0 / / 05.04.2013
Мне нравитсяМне не нравится
5 апреля 2013, 17:26:30
замечательный слайдер, все просто и понятно
3.
349
24 мая 2012 года
CassandraDied
763 / / 24.05.2012
Мне нравитсяМне не нравится
24 марта 2013, 16:52:55

Цитата:
простой слайдер - это лишь пара строк кода на JavaScript


Не-е-е, лучше уж я буду "мучиться" с настройкой готовых слайдеров, чем самостоятельно писать настолько "простой" слайдер с нуля.

Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог