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

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

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

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

Это слайд-шоу можно использовать для представления небольшого сайта-визитки, вся информация которого может поместиться в одном html-документе.

Здесь можно посмотреть на html-документ, из которого сделана презентация. Так он выглядит при отключенном JavaScript:

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

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

Рассмотрим пример преобразования обычного правильно построенного 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>, мы сможем:

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

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

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

Как посчитать слайды?


var divs = document.getElementsByTagName("div");

Массив divs содержит все элементы div из документа. Переберем его и выберем только <div class="slide">, построим новый массив. В нем будут храниться только слайды.


for (var i=0; i < divs.length; i++) {
  if (divs[i].className == ‘slide’) {
    slides.push(divs[i]);
  }
}

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

Как сделать панель навигации?

Напишем функцию createNavBar(mSlide,allSlides), которой в качестве аргументов будем передавать отображаемый в настоящее время слайд и общее количество слайдов.

С помощью этой функции создадим элемент <span id="InfoSpan">...</span>, в котором разместим номер отображаемого слайда, общее количество слайдов и ссылки «вперед-назад».

Как сделать ссылки?

Напишем функцию createLnk(lnkId, lnkTxt), которой в качестве аргументов будем передавать id cоздаваемой ссылки и текст для нее.

Функция будет возвращать ссылку вида <a href="#" id="idссылки" onclick="вызов функции linkClick(evt)">текст ссылки</a>.

Куда пойдем по ссылкам?

В функции linkClick(evt) определяем какая из созданных нами ссылок была нажата и затем либо переключаем слайды, либо показываем или убираем оглавление слайдов.

Как было сказано ранее, оглавление соберем из заголовков <h2>...</h2>.

Как выбрать заголовки?

Переберем все дочерние элементы <div class="slide">.


for (var h=0; h < mySlide.childNodes.length; h++) {

В массив headsTmp поместим все элементы <h2>...</h2>, которые нам встретятся:


 if (mySlide.childNodes[h].tagName == 'H2') {
// в массив заголовков кладем первый h2 для каждого слайда
 heads[s] = mySlide.childNodes[h];
 heads[s].id = 'heads'+s;
 break;
 } 

... и выберем самый первый из них. Его текст будем использовать в оглавлении.

Как сделать оглавление?

Функции createTableContent(mHead) передадим в качестве аргумента массив heads, состоящий из заголовков слайдов.

В этой функции помимо оглавления создадим еще две ссылки: открыть и закрыть меню. Переберем массив heads, извлечем текст, содержащийся в каждом <h2>...</h2>. Разместим этот текст в ссылках и составим из них список.

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

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

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

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

Обсуждение вышеописанного в нашем форуме.



Много комментариев (8) к “XHTML+CSS+DOM слайд-шоу”

  1. Дмитрий :

    1. Хотелось бы внести поправку в разделе “XHTML+CSS+DOM слайд-шоу. Как выбрать заголовки?”. Там в цикле, где обходятся все H2, после нахождения первого можно поставить break, что при большом количестве H2 уменьшает время отработки цикла в разы.
    2. Лучше в статье описать CSS слайдов, чтобы людям не преходилось что-либо качать.


  2. Баранов Андрей :

    Спасибо.
    по п.1 – согласен. теперь так и будет.
    по п.2 – кроме CSS-файла в примере принимают участие еще и JavaScript, и HTML. Поэтому, чтобы разобраться с кодом и поэкспериментировать с ним, лучше скачать весь архив(весит примерно 6кБ).


  3. AndrewS :

    Раз уж написана функция closeSlides(), используйте ее в init() вместо if (mySlide.id != ’slide0′) { mySlide.style.display = ‘none’; }. И зачем елементы массива получают id’s, тогда как уже и так навсегда пронумерованы?


  4. AndrewS :

    Будьте добры, скажите – это Ваша идея сделать подобное слайд шоу? Идея действительно хороша…


  5. Баранов Андрей :

    Для AndrewS:
    Идея не моя, где видел – не помню уже. Я лишь написал скрипт и описал принцип.


  6. AndrewS :

    Спасибо за ответ! А модификацией скрипта заниматься не собираетесь? Уж очень мне понравилось слайд-шоу, поэтому я Вас не оставляю в покое…


  7. Баранов Андрей :

    Для AndrewS:
    если есть интересные идеи по модификации – предлагайте. пока не хватает времени придумать и сделать.


  8. Andrey :

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



22 queries 0.232 seconds.