Создание скользящего слайдшоу средствами jQuery
Создание слайдшоу на JavaScript - это отличный способ поместить на странице кучу инфы и одновременно занять сравнительно мало места. Давайте создадим свое слайдшоу со скользящими слайдами и навигационными кнопками. Вы сможете использовать его для отображения какой-либо важной информации на главной странице сайта или даже в качестве галереи картинок. В любом случае его очень легко создать с помощью нескольких полезных плагинов jQuery.
В прошлом году я разместил урок по созданию слайдшоу изображений мотоцикла моей мечты - Harley Davidson. На этот раз сконцентрируюсь на автомобиле моей мечты - Lamborghini Gallardo (или Murcielago – я весьма скромен!). В прошлый раз мы создали слайдшоу с автоматическим переключением и с кнопками для перематывания изображений. На этот раз мы создадим слайдшоу с кнопками, позволяющими пользователям моментально переключаться на любое конкретное изображение.
Как это работает
Наше слайдшоу будет частично состоять из HTML и CSS, а также из некоторых мега-прикольных фишек из библиотеки Javascript jQuery. Нам также понадобятся плагины LocalScroll и ScrollTo, созданные Ariel Flesler, которые и составят основную часть нашего слайдшоу, так что нам самим нужно будет написать только пару строчек, чтобы подключить все плагины и заставить слайдшоу проигрываться.
LocalScroll и ScrollTo работают рука об руку для выполнения функциональности слайдшоу. LocalScroll позволяет отобразить конкретный слайд с заданным ID, в то время как ScrollTo обеспечивает плавное переключение от одного слайда к другому. При создании слайдшоу не стоит забывать о его доступности для пользователей, в чьих браузерах отключен JavaScript. Это значит, что нам придется прибегнуть к помощи стандартных CSS и HTML, прежде чем подключать ко всему этому jQuery.
HTML структура
HTML код для нашего примера начинается со стандартных тегов Doctype, title и link на таблицу стилей CSS. Затем идет загрузка библиотеки jQuery, двух плагинов и нашего пустого файла scripts.js.
Блок HTML, который и является нашим слайдшоу, разделен на две части: блок div с ID “slideshow” и блок div с ID “slideshow-nav”. Блок “slideshow” содержит ненумерованный список ссылок-изображений, где у каждого элемента <li> есть ID, который соответствует якорю из “slideshow-nav”, находящегося ниже.
Просмотрите то, что получилось, в браузере, без CSS или Javascript, - это покажет сырую версию слайдшоу, где ссылки перегрузят страницу с нужным изображением.
Стили CSS
С помощью CSS мы постараемся показать на странице кое-что очень похожее на слайдшоу. Во-первых, ширина и высота блока “slideshow” должна равняться ширине и высоте самих изображений. Если сложить ширину всех изображений, то получим общую ширину списка - 4590px (918px * 5 изображений). Используем свойство overflow для того, чтобы скрыть практически всю эту линию изображений, оставив только одно из них. Через CSS мы зададим overflow: scroll; так что слайдшоу будет работать и без Javascript, хотя и с дурацкой полосой прокрутки, а не изящным скользящим эффектом.
Я также добавил для красоты тень с помощью свойства CSS3 box-shadow.
Затем блок “slideshow-nav” поместим под основной блок “slideshow”. Эти кнопки будут работать, только если Javascript включен, так что мы не будем отображать ненужные кнопки в случае, если Javascript не поддерживается браузером. visibility: hidden; спрячет эти кнопки по умолчанию, а затем их можно сделать видимыми, если у пользователя включен Javascript.
Затем ссылки для переключения между слайдами превратим в симпатичные круглые кнопки при помощи свойства CSS3 border-radius. В браузерах, которые не поддерживают эти свойства, отобразятся квадратные кнопки, а чтобы сделать отображение кнопок кросс-браузерными, используйте простенькие изображения.
Теперь слайдшоу можно просмотреть в браузерах без поддержки Javascript, но с полосой прокрутки, позволяющей пользователям просматривать изображение за изображением. Большинство слайдшоу на Javascript ломаются, как только Javascript отключается, продолжая отображать нерабочие кнопки и другой недоступный контент, так что мы создаем классное слайдшоу, которое отобразит только нужные, рабочие части навигации.
jQuery
Перед тем, как начать реализовывать функциональность нашего слайдшоу, необходимо предусмотреть случаи, когда Javascript в браузере будет включен. Во-первых, стиль CSS для блока “slideshow” поменяется: вместо overflow: scroll; будет overflow: hidden;, для того чтобы убрать полосу прокрутки. Затем включается отображение кнопок, которые были невидимыми до сих пор, а также первой кнопке добавляется класс ‘active’.
Плагины LocalScroll и ScrollTo активируются в одной строке кода. Мы применяем localScroll к элементам блока “slideshow-nav” и назначаем каждому из них элемент блока “slideshow”, передвигая их по оси X. Есть много эффектов для этого, но все, что нам сейчас нужно, - это чтобы все работало и работало правильно.
В завершении, нам необходимо подсвечивать кнопку при нажатии, так что простое правило jQuery уберет класс “active” у всех кнопок, а затем добавит его только той кнопке, на которую только что кликнул пользователь. Класс “active” затем опишем в стиле CSS, чтобы задать кнопке серый заполненный фон.
Вот, что мы получили
Протестировав слайдшоу в браузере, можно увидеть работу jQuery во всей его красе. Слайды будут плавно сменять друг друга, а соответствующая кнопка будет загораться. Наше слайдшоу не только выглядит хорошо, но и остается доступным даже без Javascript и CSS. Пользователи со старыми версиями браузеров тоже увидят слайдшоу, разве что без фишек CSS3 box-shadow и border-radius, но они, возможно, никогда и не видели такого!
Не стесняйтесь смотреть код HTML, CSS и jQuery и использовать его в своих приложениях. Не забудьте скачать превосходные плагины jQuery LocalScroll и ScrollTo, разработанные Arial Flesler.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/KIx5E4Xy6nU/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Бог тянет за одну руку, а черт - за обе ноги Буш Вильгельм - (1832-1908) - немецкий поэт и художник |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.