В разработку слайд-шоу на JavaScript Разработка веб-сайтов
Download 90.57 Kb.
|
Введение в 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: 
|