В разработку слайд-шоу на JavaScript Разработка веб-сайтов


Download 90.57 Kb.
bet1/9
Sana07.02.2023
Hajmi90.57 Kb.
#1175608
  1   2   3   4   5   6   7   8   9
Bog'liq
Введение в JavaScript


Введение в разработку слайд-шоу на JavaScript
Разработка веб-сайтов*CSS*JavaScript*jQuery*HTML*
Перевод
Автор оригинала: Gabriele Romanato
В этой статье мы опишем основные принципы построения слайд-шоу на JavaScript, то, из чего они строятся (HTML, CSS, JavaScript) и техники, которые используются при их создании.

JS-код будет представлен в двух видах – ванильном и jQuery. Это сделано специально, чтобы подчеркнуть: в современных браузерах даже простой JS можно прекрасно использовать, особенно комбинируя его с анимациями и переходами CSS. jQuery хорош, если нам не хочется волноваться насчёт несовместимостей браузеров или использовать более простой API. Предоставленный код преследует лишь в демонстрационные цели.

В примерах с ванильным JS я использую простейший метод инициализации объектов, init(). Этот метод занимается вызовом нужного кода для создания экземпляра объекта через new. В этой ветке на Stack Overflow всё объясняется подробнее. Почему объекты, а не функции? Для ответа на этот вопрос понадобилась бы отдельная статья – но, в общем, просто чтобы код был более организованным и простым для повторного использования.

Структура HTML

Разметка HTML должна быть такой, чтобы страница оставалась читаемой и без CSS и JS. Поэтому нужно разобраться, какие компоненты будут составлять нашу структуру. Обычно это:

1) самый внешний контейнер


2) внутренний враппер
3) несколько элементов-слайдов
4) враппер для ссылок на страницы
5) две кнопки «предыдущая» и «следующая»

Компоненты 2, 4 и 5 необязательные, поскольку:

— слайды можно обернуть и в один элемент. Это делают, когда переход между слайдами делается через fade in / fade out
— ссылки на страницы и кнопки можно опустить, если слайд-шоу автоматическое, и происходит без вмешательства пользователя

Пример возможной HTML-структуры:



<div class="slider" id="main-slider">самый внешний контейнер -->
<div class="slider-wrapper">внутренний враппер -->
<div class="slide">...div>
<div class="slide">...div>
<div class="slide">...div>
div>
<

Download 90.57 Kb.

Do'stlaringiz bilan baham:
  1   2   3   4   5   6   7   8   9




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©fayllar.org 2024
ma'muriyatiga murojaat qiling