В первой части «Создание простых слайд-шоу с использованием MooTools» мы создали очень простой сценарий MooTools слайд-шоу. Сценарий был очень примитивен: никаких событий и нет возможности переключаться между изображениями (просматривать следующеее/предыдущее изображение).
В этом уроке предыдущий сценарий слайд-шоу будет усовершенствован следующими функциями:
- Добавление кнопок управления «Вперед», «Назад».
- Добавление «Содержание», так что пользователь может нажать на любое изображение.
- Приостановка показа слайд-шоу, когда пользователь навел мышку на контейнер, в котором находятся изображения и возобновления слайд-шоу при выведении мышки из него.
- Очевидно, наш MooTools JavaScript код предыдущей части будет меняться довольно незначительно.
<div id="slideshow-container">
<img src="slideshow/cricci1.jpg" alt="Christina Ricci" />
<img src="slideshow/cricci2.jpg" alt="Christina Ricci" />
<img src="slideshow/cricci3.jpg" alt="Christina Ricci" />
<img src="slideshow/cricci4.jpg" alt="Christina Ricci" />
<img src="slideshow/cricci5.jpg" alt="Christina Ricci" />
</div>