JQuery слайдер
Автор: mike
7 февраля 2013 года
Последнее время большую популярность приобрели движущиеся горизонтальные панели, известные также как "Слайдеры" или "Карусели". Оно и понятно, это простой и очень эффективный метод привлечь внимание пользователя. Слайдеры позволяют активнее влиять на поведение пользователей на сайте и продвигать необходимые материалы.
На сегодняшний день существуют сотни, если не тысячи готовых скриптов и модулей для организации слайдера. Вы можете вбить в Google строку "JQuery slider" и найдете десятки обзоров с ссылками на сотни готовых модулей "слайдеров" и "каруселей".
Основная проблема всех готовых модулей - универсальность, громоздкость и, иногда, сложность настройки. Создать слайдер с нуля, иногда, проще чем настроить готовый модуль, ибо простой слайдер - это лишь пара строк кода на JavaScript.
В этой небольшой заметке я покажу как с нуля создать свой слайдер.
С точки зрения HTML верстки слайдер состоит из двух основных частей - "окна" отображения (viewport) и основного содержимого, состоящего из нескольких слайдов. Ширина одного слайда обычно равна ширине окна отображения. Остальные слайды, не влазят в окно отображения просто не видны.
Ниже приведен пример самого простого слайдера с описанием в комментариях.
Код:
<styletype="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 верстка слайдера -->
<!-- Основной контейнер -->
<divid="slider">
<!-- Фиксированный контейнер -->
<divid="slider_container">
<!-- Плавающий контейнер -->
<divid="slider_moving_container">
<!-- Слайд №1. Вместо div можно было бы использовать просто изображение, но в слайды нужно будет вставить текст. -->
<divclass="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 -->
<divclass="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 -->
<divclass="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_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();
Результат работы примера можно посмотреть на демо-странице.
Чтобы слайдер имел законченный вид, его необходимо снабдить элементами навигации и добавить подписи к слайдам.
Код:
<styletype="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>
<bodystyle="font-family:arial;font-size:12px;">
<divid="slider">
<divid="slider_container">
<divid="slider_moving_container">
<!-- Слайд №1 -->
<divclass="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');">
<!-- Текст подписи слайда -->
<divid="slider_info">
<ahref="http://www.codenet.ru/cat/WEB-Development/HTML/"id="slider_title">Невский Экспресс</a>
<ahref="http://www.codenet.ru/cat/WEB-Development/HTML/"id="slider_description">Электровоз ЧС200-004 с поездом "Невский Экспресс". Станция Рябово. Скорость 160 км/ч. Февраль 2013 года.</a>
</div>
</div>
<!-- Слайд №2 -->
<divclass="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');">
<!-- Текст подписи слайда -->
<divid="slider_info">
<ahref="http://www.codenet.ru/cat/WEB-Development/HTML/"id="slider_title">Санкт-Петербург - Брянск</a>
<ahref="http://www.codenet.ru/cat/WEB-Development/HTML/"id="slider_description">Электровоз ЧС2Т-1026 с поездом Санкт-Петербург - Брянск. Перегон Чудово-Московское - Гряды. В районе платформы Дубцы. Скорость 100 км/ч. Февраль 2013 года.</a>
</div>
</div>
<!-- Слайд №3 -->
<divclass="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');">
<!-- Текст подписи слайда -->
<divid="slider_info">
<ahref="http://www.codenet.ru/cat/WEB-Development/HTML/"id="slider_title">"Сапсан"</a>
<ahref="http://www.codenet.ru/cat/WEB-Development/HTML/"id="slider_description">Электропоезд ЭВС1-005 "Сапсан" и электровоз ЧС2Т-1014 с поездом Санкт-Петербург - Ижевск. Перегон Чудово-Московское - Гряды. В районе платформы Дубцы. Скорость 100 км/ч. Февраль 2013 года.</a>
</div>
</div>
</div>
</div>
<!-- Элементы навигации по слайдам -->
<ahref="#"id="slider_right"></a>
<ahref="#"id="slider_left"></a>
</div>
Код автоматической смены слайдов немного изменился из-за реализации ручного управления (стрелки "влево" и "вправо"). Если пользователь по клику сменил слайд, то автоматическая смена слайдов выключается.
Код:
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'});
returnfalse;
});
$('#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'});
returnfalse;
});
// Автоматическая смена слайдов. См. предыдущий пример.
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();
Результат работы примера можно посмотреть на демо-странице.
Источник: http://feedproxy.google.com/~r/codenet/read/~3/JlCvQeIOLaA/


Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2023-11-29 » Реклама на Яндекс Картах
- 2023-11-29 » Добавим ваш бизнес на карты
- 2023-11-21 » Настройка и использование Fail2ban на Linux
- 2023-11-20 » Лучшие пользовательские инструкции для DALL-E 3, или как заставить генерировать изображения, нужные вам
- 2023-11-17 » Топ проблем, которые мешают продвижению сайта
- 2023-11-16 » Как бесплатно пользоваться GPT-4 — пять способов
- 2023-11-15 » Нейросеть Watermark Remover: удобное удаление водяных знаков с изображений
- 2023-11-08 » Оптимизация и тюнинг производительности MariaDB MySQL сервера внутри Docker
- 2023-11-07 » Как настроить службу Linux для автоматического запуска после сбоя или перезагрузки — часть 1: практические примеры
- 2023-10-29 » Простой тест PHP Mail
- 2023-10-27 » Работа с базами данных MySQL в ISPManager 5 + Docker
- 2023-09-22 » Используем ChatGPT для сбора семантики: возможности и провалы
- 2023-09-22 » 10 SEO-приемов: база для SEO-специалистов
- 2023-09-22 » Как запустить контекстную рекламу по конкурентам в Яндекс Директ и не получить повестку в суд
- 2023-09-22 » Как составить контент-план с помощью нейросети
- 2023-09-01 » Организация продаж на Авито и ЮЛА
- 2023-08-30 » Услуги дизайнера на заказ
- 2023-08-29 » Интеграция с 1С
- 2023-08-29 » Доработка интернет-магазина
- 2023-08-10 » Как продвигать сайты-аффилиаты в поиске
- 2023-08-10 » SEO-продвижение сайтов медицинской тематики: лучшие стратегии и практики
- 2023-05-19 » Как повысить конверсию в интернет-магазине: 17 способов
- 2023-05-19 » Тренды в веб-дизайне в 2023 году
- 2023-05-19 » Как подключиться к серверу по VNC
- 2023-02-27 » Грамотная структура страницы сайта — основные элементы и советы
- 2023-02-07 » Маркетинговые исследования
- 2023-02-01 » Вывод сайта из-под фильтров
- 2023-02-01 » Проработка воронки продаж в Интернете
- 2023-01-26 » Установка и настройка Call tracking и Email tracking
- 2022-11-09 » 12 работающих формул продающих текстов
Секрет быть несчастным: иметь время занудствовать на тему, счастлив ты или нет Шоу Джордж Бернард - (1856-1950) - английский писатель. В своем творчестве ниспровергал догматизм и предвзятость, традиционность представлений |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.