Усі зображення (елементи img) у документі є екземплярами об'єкта Image. Кожен об'єкт Image має властивість src, яку можна змінювати. Використовуючи це, можна вносити зміни до графічних образів, присутніх на веб-сторінці.
На сторінці зображення та кнопка. При натисканні кнопки запускається слайд-шоу, тобто. замість першої картинки з'являється друга, її змінює третя, після третьої четверта, після четвертої знову перша.
У функції slideShow організовано рядковий масив, елементами якого є імена файлів малюнків. Один із цих малюнків показується відразу. У функції визначається об'єкт r, який має властивість src. У разі події Click функція викликається і цій властивості присвоюється черговий елемент масиву. Потім індекс збільшується на 1. Якщо індекс дорівнюватиме 4, то йому знову присвоюється значення 0.
Нехай на нашій сторінці 9 зображень. Для перегляду ми створимо програму «Слайд-щоу». Фотографії розташуються стопкою в середині страцици, а через два секунди верхній знімок плавно "поїде" ліворуч за межі екрану. Через невеликий проміжок часу за першою фотографією піде друге, за нею третє – і так до останнього знімку. Інтервал між зникненням однієї фотографії і початком руху інший залежить від розмірів монітора комп'ютера.
Відправивши всі знімки за межі екрана, програма залишить на місці зображень порожнє тло.
Запуск слайд-шоу відбувається автоматично після завантаження сторінки:
window.onload=drive;
Перед функцією drive() (у перекладі російською мовою – їздити) оголошуємо три змінні:
var i=1;var k=200;var s=0;
Змінна i – ідентифікатор початку процесу, k – лічильник зміщення фотографії вліво, s – лічильник знімків.
Тепер сама функція drive(): змінну ph по черзі «завантажується» ID кожного знімка (ph="p"+s).
Першим виконується блок
if(i==1)
{
i=0;
window.setTimeout(drive, 2000);
}
Якби він був відсутній, верхнє зображення почало рух відразу після завантаження сторінки. За наявності такого блоку ми даємо відвідувачу 2 секунди на перегляд першої фотографії. Потім i стає нульовим і функція викликається заново. Тепер перший блок пропускається, оскільки умова if(i==1) хибна, і починають виконуватися такі інструкції. Таким чином, програма, "орієнтуючись" на значення змінної i, "розуміє", перший це виклик чи ні, треба затримати верхній знімок чи ні.
Далі все просто. Властивості left фотографії з id=ph надається значення змінної k. Зараз у нас йдеться про верхній знімок, тому id="p0", а значення left складає 200px (початкове значення k=200 вибрано саме таким, оскільки у вихідному положенні всі фотографії всередині шару div зміщені на 200 пікселів). Відбувається виконання оператора k=k-10 та функція drive() через 10 мілісекунд викликається знову.
Тепер значення left складає 190px і відвідувач бачить, як зображення починає зміщуватися вліво.
Так повторюється доти, доки виконується умова k>=-3000. Тобто знімок «відходить» ліворуч на 3200 пікселів від початкового положення. Цього достатньо, щоб зникнути з екрана найбільшого монітора.
Коли верхня фотографія повністю зникла, програма переходить до наступного блоку інструкцій:
k=200;
s++;
window.setTimeout(drive, 10);
Тепер змінна s збільшується на одиницю і функція приступає до
роботі з фотознімком 1.jpg. Оскільки умова k>=-3000 знову істинна, повторюється виконання блоку
document.getElementById(ph).style.left=k+"px";
k=k-10;
window.setTimeout(drive, 10);
Потім зникає фото 1.jpg і програма береться за третій знімок. Таким чином, справа доходить до останнього – 8.jpg. Після його зникнення умова if(s<9) стає хибною і виконання програми переривається. Перегляд слайд-шоу завершено.
