XHTML+CSS+DOM слайд-шоу 2

О чем эта статья?

Рассмотрим пример преобразования обычного правильно построенного XHTML документа в презентацию, состоящую из отдельных слайдов.

Браузеры с отключенным JavaScript просто покажут всю страницу полностью. Зато браузеры, с включенным JavaScript и поддерживающие DOM представят этот документ в виде отдельных слайдов с:

  • ссылками вперед и назад
  • общим количеством кадров и номером отображаемого слайда
  • ссылками-оглавлением на все кадры презентации
  • анимацией при смене слайдов

Что будем делать?

  • Разобьем документ на отдельные слайды
  • Покажем общее количество слайдов и номер слайда, отображаемого в настоящий момент
  • Соорудим навигацию по слайдам типа «вперед-назад»
  • Соберем заголовки слайдов и сделаем из них оглавление

Как построим XHTML-документ?

Для реализации нашего слайд-шоу разобьем документ на логически законченные блоки и заключим каждый в <div class="slide">...</div>.

Каждый слайд будем начинать с заголовка, заключенного в теги <h2>...</h2>. Из них соберем оглавление.

Остальной XHTML-код в пределах слайда может быть произвольным, включая изображения, таблицы и т.п.

Что должно получиться?

XHTML-код документа должен получиться таким:


...
<body>
  <div class="slide">

    <h2>Заголовок слайда 1</h2>
    ... произвольный XHTML-код 1-го слайда
  </div>
...
  <div class="slide">
    <h2>Заголовок слайда n</h2>

    ... произвольный XHTML-код n-го слайда
  </div>
</body>
...

Для чего такая структура?

Зная, что каждый слайд заключен в <div class="slide">...</div>, а заголовки заключены в теги <h2>...</h2>, мы сможем:

  • легко подсчитать их количество и сделать панель навигации «следующий – предыдущий»;
  • определить заголовки каждого блока и сделать из них оглавление.

Можно ли добавить таблицу?

IE6 Opera8 FF1.5
HTML + + +
CSS + + +
DOM + + +

<h2>Конечно!</h2>

<h3>И не только таблицу!</h3>

<p>Можно использовать практически любые теги для разметки внутри слайдов. Важно лишь соблюдать правила разметки и корректно закрывать теги.</p>

Что сделаем с помощью JavaScript?

  • Проверим, поддерживаются ли методы DOM браузером.
  • Найдем в документе все <div class="slide">...</div> и подсчитаем их количество.
  • Переберем слайды:
    • выберем в них заголовки <h2>...</h2> для генерации оглавления
    • создадим ссылки типа «вперед-назад»
  • Сделаем панель навигации по слайдам
  • Сделаем оглавление слайдов для быстрого перехода к любому из них

Что еще можно сделать?

Можно взять архив с этим примером и исследовать JavaScript, в котором очень подробно описаны все действия по созданию элементов навигации и управлению слайдами.

Можно попытаться оптимизировать код JavaScript или добавить что-то новое.

Можно задать любой вопрос по работе этого примера или оставить комментарий.

Можно написать свой вариант скрипта и продемонстрировать его работу посетителям сайта.