Рассмотрим пример преобразования обычного правильно построенного XHTML документа в презентацию, состоящую из отдельных слайдов.
Браузеры с отключенным JavaScript просто покажут всю страницу полностью. Зато браузеры, с включенным JavaScript и поддерживающие DOM представят этот документ в виде отдельных слайдов с:
- ссылками вперед и назад
- общим количеством кадров и номером отображаемого слайда
- ссылками-оглавлением на все кадры презентации
Это слайд-шоу можно использовать для представления небольшого сайта-визитки, вся информация которого может поместиться в одном html-документе.
Здесь можно посмотреть на html-документ, из которого сделана презентация. Так он выглядит при отключенном JavaScript:
XHTML+CSS+DOM слайд-шоу
О чем эта статья?
Рассмотрим пример преобразования обычного правильно построенного XHTML документа в презентацию, состоящую из отдельных слайдов.
Браузеры с отключенным JavaScript просто покажут всю страницу полностью. Зато браузеры, с включенным JavaScript и поддерживающие DOM представят этот документ в виде отдельных слайдов с:
- ссылками вперед и назад
- общим количеством кадров и номером отображаемого слайда
- ссылками-оглавлением на все кадры презентации
Что будем делать?
- Разобьем документ на отдельные слайды
- Покажем общее количество слайдов и номер слайда, отображаемого в настоящий момент
- Соорудим навигацию по слайдам типа «вперед-назад»
- Соберем заголовки слайдов и сделаем из них оглавление
- ...
Как построим XHTML-документ?
Для реализации нашего слайд-шоу разобьем документ на логически законченные блоки и заключим каждый в ...
.
Каждый слайд будем начинать с заголовка, заключенного в теги ...
. ?з них соберем оглавление.
Остальной XHTML-код в пределах слайда может быть произвольным, включая изображения, таблицы и т.п.
Что должно получиться?
XHTML-код документа должен получиться таким:
...
Заголовок слайда 1
... произвольный XHTML-код 1-го слайда
...
Заголовок слайда n
... произвольный XHTML-код n-го слайда
...
Для чего такая структура?
Зная, что каждый слайд заключен в ...
, а заголовки заключены в теги ...
, мы сможем:
- легко подсчитать их количество и сделать панель навигации «следующий – предыдущий»;
- определить заголовки каждого блока и сделать из них оглавление.
Что сделаем с помощью JavaScript?
- Найдем в документе все
...
и подсчитаем их количество.
- Переберем слайды:
- выберем в них заголовки
...
для генерации оглавления
- создадим ссылки типа «вперед-назад»
- Сделаем панель навигации по слайдам
- Сделаем оглавление слайдов для быстрого перехода к любому из них
Как посчитать слайды?
var divs = document.getElementsByTagName("div");
Массив divs
содержит все элементы div
из документа. Переберем его и выберем только , построим новый массив. В нем будут храниться только слайды.
for (var i=0; i
Теперь, зная длину массива со слайдами мы знаем количество слайдов в документе и можем обратиться к любому из них.
Как сделать панель навигации?
Напишем функцию createNavBar(mSlide,allSlides)
, которой в качестве аргументов будем передавать отображаемый в настоящее время слайд и общее количество слайдов.
С помощью этой функции создадим элемент ...
, в котором разместим номер отображаемого слайда, общее количество слайдов и ссылки «вперед-назад».
Как сделать ссылки?
Напишем функцию createLnk(lnkId, lnkTxt)
, которой в качестве аргументов будем передавать id cоздаваемой ссылки и текст для нее.
Функция будет возвращать ссылку вида текст ссылки
.
Куда пойдем по ссылкам?
В функции linkClick(evt)
определяем какая из созданных нами ссылок была нажата и затем либо переключаем слайды, либо показываем или убираем оглавление слайдов.
Как было сказано ранее, оглавление соберем из заголовков ...
.
Как выбрать заголовки?
Переберем все дочерние элементы .
for (var h=0; h
В массив headsTmp
поместим все элементы ...
, которые нам встретятся:
if (mySlide.childNodes[h].tagName == 'H2') {
// в массив заголовков кладем первый h2 для каждого слайда
heads[s] = mySlide.childNodes[h];
heads[s].id = 'heads'+s;
break;
}
... и выберем самый первый из них. Его текст будем использовать в оглавлении.
Как сделать оглавление?
Функции createTableContent(mHead)
передадим в качестве аргумента массив heads
, состоящий из заголовков слайдов.
В этой функции помимо оглавления создадим еще две ссылки: открыть и закрыть меню. Переберем массив heads
, извлечем текст, содержащийся в каждом ...
. Разместим этот текст в ссылках и составим из них список.
Что еще можно сделать?
Можно взять архив с этим примером и исследовать JavaScript, в котором очень подробно описаны все действия по созданию элементов навигации.
Можно попытаться оптимизировать код JavaScript или добавить что-то новое.
Можно задать любой вопрос по работе этого примера или оставить комментарий.
Обсуждение вышеописанного в нашем форуме.
1. Хотелось бы внести поправку в разделе “XHTML+CSS+DOM слайд-шоу. Как выбрать заголовки?”. Там в цикле, где обходятся все H2, после нахождения первого можно поставить break, что при большом количестве H2 уменьшает время отработки цикла в разы.
2. Лучше в статье описать CSS слайдов, чтобы людям не преходилось что-либо качать.
2005-10-03 at 3:22 pm
Спасибо.
по п.1 – согласен. теперь так и будет.
по п.2 – кроме CSS-файла в примере принимают участие еще и JavaScript, и HTML. Поэтому, чтобы разобраться с кодом и поэкспериментировать с ним, лучше скачать весь архив(весит примерно 6кБ).
2005-10-03 at 5:12 pm
Раз уж написана функция closeSlides(), используйте ее в init() вместо if (mySlide.id != ’slide0′) { mySlide.style.display = ‘none’; }. ? зачем елементы массива получают id’s, тогда как уже и так навсегда пронумерованы?
2005-12-25 at 10:39 pm
Будьте добры, скажите – это Ваша идея сделать подобное слайд шоу? ?дея действительно хороша…
2006-01-26 at 11:43 am
Для AndrewS:
?дея не моя, где видел – не помню уже. Я лишь написал скрипт и описал принцип.
2006-01-26 at 12:01 pm
Спасибо за ответ! А модификацией скрипта заниматься не собираетесь? Уж очень мне понравилось слайд-шоу, поэтому я Вас не оставляю в покое…
2006-01-26 at 2:13 pm
Для AndrewS:
если есть интересные идеи по модификации – предлагайте. пока не хватает времени придумать и сделать.
2006-01-26 at 2:52 pm
Почему бы не скрывать содержимое слайдов сразу? Плохо что пока все слайды не загрузятся, они показываются все вместе.
2006-02-26 at 1:34 pm