Простое слайдшоу на jQuery
В данном уроке представлено очень простое слайд шоу на основе jQuery. Навигация слайд шоу позволяет перемещаться между изображениями и переходить на первую и последнюю картинку. Кроме того, для быстрого перехода к картинке используется панель миниатюр.
Предполагается, что все используемые изображения имеют одинаковый размер.
HTML
В примере используется 6 изображений. Разметка галереи состоит из контейнера, в который включены три элемента div
. Элемент div
navigate содержит элементы навигационной панели. Элемент div
img_container выводит полноразмерные изображения. А элемент div
imgtmub_box предназначен для организации панели миниатюр.
<div id="container"> <div id="navigate"> <a href="/" id="linkfirst">« Первая</a> <span id="spanfirst">« Первая</span> <a href="/" id="linkprev">‹</a> <span id="spanprev">‹</span> <a href="/" id="linknext">›</a> <span id="spannext">›</span> <a href="/" id="linklast">Последняя »</a> <span id="spanlast">Последняя »</span> </div> <div id="img_container"> <div id="img_box"> <img id="img1" src="/img/original/01.jpg"/> <img id="img2" src="/img/original/02.jpg"/> <img id="img3" src="/img/original/03.jpg"/> <img id="img4" src="/img/original/04.jpg"/> <img id="img5" src="/img/original/05.jpg"/> <img id="img6" src="/img/original/06.jpg"/> <div style="clear:both;"></div> </div> </div> <div id="imgthumb_box"> <a href="/" class="thumblink" id="imglink1"><img src="/img/thumb/01.jpg"/></a> <a href="/" class="thumblink" id="imglink2"><img src="/img/thumb/02.jpg"/></a> <a href="/" class="thumblink" id="imglink3"><img src="/img/thumb/03.jpg"/></a> <a href="/" class="thumblink" id="imglink4"><img src="/img/thumb/04.jpg"/></a> <a href="/" class="thumblink" id="imglink5"><img src="/img/thumb/05.jpg"/></a> <a href="/" class="thumblink" id="imglink6"><img src="/img/thumb/06.jpg"/></a> </div> </div>
jQuery
Перемещение изображений в основном реализуется посредством изменения свойства left. По умолчанию свойство left для элемента img_box имеет значение 0 px или auto в зависимости от используемого браузера. Данный момент контролируется и в коде и соответственно выставляется значение 0 для переменной box_left.
Если кнопка для перехода на следующее изображение нажата на последнем изображении, то осуществляется переход на первое изображение. Для кнопки перехода на предыдущее изображение реализована аналогичная логика перемещения на последнее изображение.
$(document).ready(function() { var total = $("#img_box img").length; $("#imglink1 img").css({ "border-color": "#0099cc", "top": "-5px" }); $(".thumblink").click(function() { var imgnumber = parseInt($(this).attr('id').replace("imglink", "")); var move = -($("#img"+imgnumber).width() * (imgnumber - 1)); $("#img_box").animate({ left: move }, 500); $("#imgthumb_box").find("img").removeAttr("style"); $(this).find("img").css({ "border-color": "#0099cc", "top": "-5px", "border-top-width": "-5px" }); return false; }); $("#navigate a").click(function() { var imgwidth = $("#img1").width(); var box_left = $("#img_box").css("left"); var el_id = $(this).attr("id"); var move, imgnumber; if (box_left == 'auto') { box_left = 0; } else { box_left = parseInt(box_left.replace("px", "")); } // Если нажата кнопка для перехода на предыдущее изображение if (el_id == 'linkprev') { if ((box_left - imgwidth) == -(imgwidth)) { move = -(imgwidth * (total - 1)); } else { move = box_left + imgwidth; } imgnumber = -(box_left / imgwidth); if (imgnumber == 0) { imgnumber = total; } } else if (el_id == 'linknext') { // Если изображение последнее, то переходим на первую картинку if (-(box_left) == (imgwidth * (total - 1))) { move = 0; } else { move = box_left - imgwidth; } imgnumber = Math.abs((box_left / imgwidth)) + 2; if (imgnumber == (total + 1)) { imgnumber = 1; } } else if (el_id == 'linkfirst') { move = 0; imgnumber = 1; } else if (el_id == 'linklast') { move = -(imgwidth * (total - 1)); imgnumber = total; } // Стили для выбранной картинки $("#imgthumb_box").find("img").removeAttr("style"); $("#imglink"+imgnumber).find("img").css({ "border-color": "#0099cc", "top": "-5px", "border-top-width": "-5px" }); $("#navigate a").hide(); $("#navigate span").show(); $("#img_box").animate({ left: move+'px' }, 400, function() { $("#navigate a").show(); $("#navigate span").hide(); }); return false; }); });
CSS
Контейнер img_box должен иметь свойство overflow: hidden, так как все изображения располагаются в нем в одну строку.
body { margin: 0; padding: 0; font-family: Arial, "Free Sans"; } #main { background: #0099cc; margin-top: 0; padding: 2px 0 4px 0; text-align: center; } #main a { color: #ffffff; text-decoration: none; font-size: 12px; font-weight: bold; font-family: Arial; } #main a:hover { text-decoration: underline; } #container { margin-top: 40px; } #navigate { text-align: center; } #navigate a, span { position: relative; top: 3px; background: #0099cc; text-decoration: none; color: #fff; padding: 4px 8px 0 8px; font-size: 20px; font-weight: bold; -webkit-border-radius: .3em .3em 0 0; -moz-border-radius: .3em .3em 0 0; border-radius: .3em .3em 0 0; } #navigate a:hover { color: #d3d3d3; } #navigate span { display: none; color: #999; } #img_container { overflow: hidden; width: 500px; margin: 0 auto; border: 8px solid #0099cc; -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; } #img_box { position: relative; width: 3000px; margin: 0; } #img_box img { float: left; } #imgthumb_box { text-align: center; } #imgthumb_box a { margin-left: 4px; } #imgthumb_box a img { border: 6px solid #e3e3e3; position: relative; top: 10px; -webkit-border-radius: .3em; -moz-border-radius: .3em; border-radius: .3em; } #imgthumb_box a img:hover { border-color: #666; }
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/Q9r52MFdm-g/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Секрет быть несчастным: иметь время занудствовать на тему, счастлив ты или нет Шоу Джордж Бернард - (1856-1950) - английский писатель. В своем творчестве ниспровергал догматизм и предвзятость, традиционность представлений |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.