Создание и разработка баз данных в Access

Вебмастер | Программы | Хостинг | Начальные сведения

HTML-код | Каскадные стили | JavaScript | PHP - серверный скрипт | MySql - база данных | Продвижение | Сервисы

JavaScript: слайд-шоу

Ниже описывается как создать небольшую программу "Слайд-шоу" на javascript. Для показа сменяемых картинок нам нужно обращаться к тэгу <img>, чтобы обращаться к конкретному тэгу, лучше его "обозвать", например, imageShow. Полностью тэг выглядит
<img src="img0.gif" width="100" height="150" border="0" alt="" id="imageShow"> (img0.gif - картинка по умолчания). "Адрес" этого тэга в иерархии нашего документа будет document.images['imageShow'], а его свойство src (ссылка на собственно картинку) - document.images['imageShow'].src. Программе надо будет "подставлять" по очереди ссылки на картинки. Чтобы запускать программу нужна кнопка, которая будет вызывать функцию, и еще кнопка, чтобы останавливать функцию. Для запуска мы используем инструкцию timer = setInterval('showMustGo()', 2000) - мы использовали встроеную функцию setInterval(), аргументами которой является функция и интервал (в милисекундах!), через которой к этой функции мы будем обращаться. Чтобы иметь возможность остановить "таймер", мы присваиваем значение timer = , а для остановки используем clearInterval(timer).
Сами ссылки мы будем хранить в массиве:
var imagesMassiv = new Array('img1.gif', 'img2.gif', 'img3.gif', 'img4.gif');
(в данном примере предполагается, что картинки лежат в той же директории, что и страница, но никто вам не мешает прописать абсолютные адреса, с http://). Обращение к элементам массива: imagesMassiv[n], где n - порядковый номер элемента; массивы нумеруются с 0!

Перейдем к функции, котору мы обзвали showMustGo():
- прежде чем подставить очередную ссылку, мы должны убедиться, что не вышли за рамки массива;
- если вышли за рамки массива, то поставить счетчик на первый элемент;
- после показа картинки увеличить значение счетчика на 1.
Вот как выглядит функция:
function showMustGo(){
    if(countImages == 4){
       countImages = 0;
    }
    document.images['imageShow'].src = imagesMassiv[countImages];
    countImages = countImages + 1;
}

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

Функцию можно усовершенствовать. Например, позволить пользователю задавать интервал самостоятельно. Для этого добавим текстовое поле <input type="text" id="imagesSec" value="1"> с идентификатором id="imagesSec". При нажатии на кнопку запуска шоу, мы должны взять это значение и умножить на 1000 (перевести секунды в милисекунды):
timer = setInterval('showMustGo()', document.all.imagesSec.value*1000). Можно запускать, а можно скачать пример.


Установите время (в секундах):


Буду весьма признателен, если при использовании кода вы сохраните копирайт программы, т.е. поставите на странице с кодом ссылку
<a href="http://web.my-study.info/javascript/slide-show.php">Программа "Слайд шоу" на JavaScript</a>.