Как сделать ссылки с прокруткой

Как сделать ссылки с прокруткой
Как сделать ссылки с прокруткой
Как сделать ссылки с прокруткой
Как сделать ссылки с прокруткой
Фикс от 18 января 2013:
Устранен баг с автопрокруткой при переключении вкладок или при сворачивании окна браузера. Убрана проверка наличия атрибута name у ссылок вперед/назад.
Обновлен архив с исходниками.
Фикс от 19 июня 2013:
Добавлена возможность использовать несколько слайдеров на странице, пока без поддержки автопрокрутки, поэтому архив с исходниками и страницу демо не обновлял.
Поправил баг появления картинок под стрелочками
О том как запустить автопрокрутку без нажатия на кнопку play я ответил во втором комментарии

Слайдеры (ротаторы контента[изображений, текста, видео]) присутствуют в каждом проекте. В интернете, реально, куча проектов, где можно скачать и подобрать по своему вкусу практически любой плагин слайдера. Однако, бывают ситуации, когда подключать к проекту слайдер, минимизированная версия которого весит от 10Кб — нецелесообразно.

Простой слайдер с горизонтальной прокруткой своими руками

Допустим, Вам требуется сделать слайдер, который содержит 15-20 картинок с подписями или пару тройку видеороликов. Именно для таких случаев Вам и пригодится данный урок, где Вы научитесь делать слайдер с горизонтальной прокруткой, причем не оптимизированный скрипт будет весить меньше 2Кб. Нажав ниже кнопку «Demo» Вы можете посмотреть демонстрацию урока, а кликнув по кнопке «Source», получите архив урока (с комментариями), кстати чтобы научиться делать простой слайдер на миниатюрах прочтите эту статью.

Демо 30820 Скачать 6674

Для понимания, сути скажу, что в конце урока мы получим слайдер с такими функциями:

Переключение слайдов влево-вправо Режим автоматической работы слайдера, кнопки старт-пауза Неограниченное количество слайдов Разметка слайдера

Разметка слайдера очень проста, нам понадобится:

общий контейнер (slider), Три контейнера для навигации (две кнопки на предыдущий/следующий слайд (navy) и одна кнопка(auto) для кнопок старт/пауза), контейнер для всех слайдов (slide-list), обертка всех слайдов (slide-wrap). <div class="slider"> <div class="slide-list"> <div class="slide-wrap"> ... тут будут слайды в контейнере slide-item <div class="slide-item"> <img src="img/img-1.jpg" alt="" /> <span class="slide-title">Первый слайд</span> </div> </div> <div class="clear"></div> </div> <div name="prev" class="navy prev-slide"></div> <div name="next" class="navy next-slide"></div> <div class="auto play"></div> </div> Стили слайдера

Для стилизации слайдера, добавим чучуть правил в файл стилей.

/ Задаем сброс обтекания / .clear { margin-top: -1px; height: 1px; clear:both; zoom: 1; } / Slider / .slider { / Ширина контейнера / width: 900px; / Внешние тступы сверху и снизу / margin: 50px auto; / Внутренние отступы для ссылок navy / padding: 0 30px; / Позиционирование / position: relative; } / Двойной клик по кнопкам вперед/назад вызывает выделение всех элементов слайдера, поэтому предотвращаем это / .slider::-moz-selection { background: transparent; color: #fff; text-shadow: none; } .slider::selection { background: transparent; color: #fff; text-shadow: none; } .slide-list { position: relative; margin: 0; padding: 0; / Скроем то что выходит за границы / overflow: hidden; } .slide-wrap { position: relative; left: 0px; top: 0; / максимально возможная ширина обертки слайдера / width: 10000000px; } .slide-item { / Ширина слайда / width: 280px; / Внутренние отступы / padding: 10px; / Обтекание / float: left; } .slide-title { / Шрифт / font: bold 16px monospace; / Указываем, что элемент блочный / display: block; }

И еще не маловажные стили для кнопок навигации вперед/назад и старт/пауза

/ навигация вперед/назад / .navy { / абсолютное позиционирование / position: absolute; top: 0; z-index: 1; height: 100%; / ширина элементов / width: 30px; cursor: pointer; } .prev-slide { left: 0; background: #dbdbdb url(bg/left-arrow.png) 11px 40% no-repeat; } .next-slide { right: 0; background: #dbdbdb url(bg/right-arrow.png) 13px 40% no-repeat; } .navy.disable { background: #dbdbdb; } / навигация старт/пауза / .auto { width: 7px; height: 11px; cursor: pointer; margin: 10px auto; } .play { background: url(bg/play.png) center no-repeat; } .pause { background: url(bg/pause.png) center no-repeat; }

Запомните, что фон у кнопок указывается такой же как и общий фон, чтобы перекрыть отображение слайдов. Теперь очередь скрипта jQuery, которым и займемся.

Пишем скрипт

Не забудьте, что для начала нужно подключить библиотеку jQuery. А после напишем скрипт слайдера и инициализируем его. Для начала приведу полный листинг кода, а затем объясню, что тут происходит:

<script type="text/javascript"> jQuery(document).ready(function(){ function htmSlider(){ / Зададим следующие параметры / / обертка слайдера / var slideWrap = jQuery('.slide-wrap'); / кнопки вперед/назад и старт/пауза / var nextLink = jQuery('.next-slide'); var prevLink = jQuery('.prev-slide'); var playLink = jQuery('.auto'); / Проверка на анимацию / var is_animate = false; / ширина слайда с отступами / var slideWidth = jQuery('.slide-item').outerWidth(); / смещение слайдера / var scrollSlider = slideWrap.position().left - slideWidth; / Клик по ссылке на следующий слайд / nextLink.click(function(){ if(!slideWrap.is(':animated')) { slideWrap.animate({left: scrollSlider}, 500, function(){ slideWrap .find('.slide-item:first') .appendTo(slideWrap) .parent() .css({'left': 0}); }); } }); / Клик по ссылке на предыдующий слайд / prevLink.click(function(){ if(!slideWrap.is(':animated')) { slideWrap .css({'left': scrollSlider}) .find('.slide-item:last') .prependTo(slideWrap) .parent() .animate({left: 0}, 500); } }); / Функция автоматической прокрутки слайдера / function autoplay(){ if(!is_animate){ is_animate = true; slideWrap.animate({left: scrollSlider}, 500, function(){ slideWrap .find('.slide-item:first') .appendTo(slideWrap) .parent() .css({'left': 0}); is_animate = false; }); } } / Клики по ссылкам старт/пауза / playLink.click(function(){ if(playLink.hasClass('play')){ / Изменяем клас у кнопки на клас паузы / playLink.removeClass('play').addClass('pause'); / Добавляем кнопкам вперед/назад клас который их скрывает / jQuery('.navy').addClass('disable'); / Инициализируем функцию autoplay() через переменную чтобы потом можно было ее отключить / timer = setInterval(autoplay, 1000); } else { playLink.removeClass('pause').addClass('play'); / показываем кнопки вперед/назад / jQuery('.navy').removeClass('disable'); / Отключаем функцию autoplay() / clearInterval(timer); } }); } / иницилизируем функцию слайдера / htmSlider(); }); </script> Пояснения:

Первым делом мы создаем необходимые перемнные, для упрощения работы с кодом:

обертка слайдера ширина слайда смещение обертки слайдера кнопки навигации

Второе действие это описание кликов на кнопки вперед/назад

Сначала я просто анимировал перемещение по клике на кнопку nextLink: с помощью функции animate() мы анимируем перемещение обертки слайдера влево на значение scrollSlider. После того, как произошло это событие, первый слайд в списке слайдов, перемещаем в конец списка, а обертке списка слайдов задаем позицию слева 0. Но оказалось, что если по ней быстро кликнуть 10 раз, то произойдет 10 перемещений, и это реальный баг.

Чтобы его устранить я сначала добавил кнопкам атрибут name и написал условие что если по кнопке нажали и она имеет атрибут name, то происходят такие действия: (но позже по совету Игоря заменил на наличие анимации).

Событие анимации слайдера по клике на кнопку предыдущий слайд немного другое:

Первыми шагами мы задаем позицию обертки слайдов слева scrollSlider и перемещаем последний слайд в обертке в самое начало списка, но заметьте уже без анимации; вторым шагом мы анимируем изменение позиции обертки слайдера на значение 0.

Вот так все просто)

Функция автопрокрутки слайдера аналогична анимации, которая происходит по клику на кнопку следующий слайд, ничего особенного, я ее вынес для того, чтобы корректно использовать фукнции jQuery — setInterval и clearInterval — они реально крутые)

По клике на кнопку автоматической работы слайдера, происходят следующие события:

Если у кнопки установлен клас play, то меняем этот класс на pause, скрываем кнопки вперед/назад [чтобы они не нарушали работу слайдера], и запускаем с помощью переменной timer автопрокрутку. Если у кнопки установлен класс pause, то меняем этот класс на start, показываем кнопки вперед/назад и прекращаем работу переменной timer, которая запускает автопрокрутку.

Последним шагом инициальзируем функцию слайдера htmSlider();

Два и более слайдеров на странице

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

jQuery(document).ready(function(){ //// ---> Проверка на существование элемента на странице jQuery.fn.exists = function() { return jQuery(this).length; } //// ---> Слайдер $(function(){ if($('.slider').exists()) { $('.slider').each(function(){ var slider = $(this); var slideWrap = slider.find('.slide-wrap'), nextLink = slider.find('.next-slide'), prevLink = slider.find('.prev-slide'), slideWidth = slider.find('.slide-item').outerWidth(), scrollSlider = slideWrap.position().left - slideWidth; / Клик по ссылке на следующий слайд / nextLink.click(function(){ if(!slideWrap.is(':animated')) { slideWrap.animate({left: scrollSlider}, 500, function(){ slideWrap .find('.slide-item:first') .appendTo(slideWrap) .parent() .css({'left': 0}); }); } }); / Клик по ссылке на предыдующий слайд / prevLink.click(function(){ if(!slideWrap.is(':animated')) { slideWrap .css({'left': scrollSlider}) .find('.slide-item:last') .prependTo(slideWrap) .parent() .animate({left: 0}, 500); } }); }); } }); });

Разметка второго слайдера отличается от первого только то что у контейнера .slider добавляем еще один класс, который позволит нам стилизировать второй (третий, н-ый) слайдер так как нам нужно:

<div class="slider slider2"> ... </div>

Оформим некоторые элементы слайдера по другому (уменьшим ширину слайдера, слайда, установим другой цвет и шрифт подписи слайда):

.slider.slider2 { width: 400px; } .slider2 .slide-item { width: 180px; } .slider2 .slide-title { font: bold 12px Arial; color: #ed0000; } .slider2 .navy { padding-top: 30px; } .slider2 .slide-item img { display: block; width: 100%; } Заключение

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

Оптимизация подключения Google Maps, отключение ненужных файлов стилей и шрифтов, отрисовка карты тока в случае наличия контейнера на странице

Знакомьтесь с моим новым jQuery плагином Formcheck.js для проверки полей формы. Можно легко проверить поле на заполненность, правильность ввода телефона, правильность ввода email и проверить отмечены ли обязательные чекбоксы, все бесплатно - все

Здравствуйте, дорогие читатели! Я как всегда с сюрпризом) В этой статье я покажу Вам, как можно сделать поле для ввода телефона, но не простое а золотое, с маскировкой и проверкой. Что такое маскировка поля? Наверняка Вы уже сталкивались с такой

Сегодня поделюсь с Вами моим скриптом, который я использую для простой проверки полей форм на заполненность перед отправкой их на сервер, с помощью jQuery (скрипт может проверять сразу несколько форм на странице)

Давненько, я ничего не писал про jQuery, все как-то руки не доходили. Будем решать задачу по работе со строкой товаров/услуг/статей, скрывая последний элемент строки при изменении ширины строки с элементами

Хочу поделиться с Вами HTML разметкой секции head, которую я использую для верстки сайтов

В данном уроке мы рассмотрим 5 кроссбраузерных, современных решений CSS3, весьма облегчающих верстку сложных, креативных проектов. В частности разберемся как сделать прозрачность, тень, поворот, градиент и инверсию элементов

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

Наконец-то выпала свободная минута и по Вашим просьбам я написал еще один, маленький скрипт для не циклического слайдера с горизонтальной прокруткой, без использования плагинов

Responsive design = отзывчивый дизайн = аксиома. Минимальная история развития веб дизайна: его путь от фиксированного до жидкого и до отзывчивого (реагирующего, адаптивного, responsive) дизайна

Как сделать ссылки с прокруткой Как сделать ссылки с прокруткой Как сделать ссылки с прокруткой Как сделать ссылки с прокруткой Как сделать ссылки с прокруткой Как сделать ссылки с прокруткой Как сделать ссылки с прокруткой

Изучаем далее:



Причёски рисунки карандашом для начинающих

Грамота для детей за поделки

Как сделать ntfs через командную строку

Маникюр бежевые тона с золотом

Поделки из оленьих рогов