Чередование изображений с предварительной загрузкой

⇐ Предыдущая 1 2 3 4 5 6 78

Напишем сценарий, при выполнении которого после загрузки страницы реализован визуальный эффект чередования изображений: на странице через равные промежутки времени появляются различные изображения.

Чтобы предварительно загрузить изображения, создадим массив imgslide: imgslide = new Array(). Каждый элемент массива представляет собой объект Image, который создается с помощью конструктора: new Image(). Первый элемент массива определяется так: imgslide[0] = new Image(). Свойство src только что созданного объекта задается в результате выполнения оператора присваивания:

imgslide[0].src = "sl1.gif"

Аналогично формируются и другие элементы массива. При работе сценария происходит обращение к элементам массива, и дополнительная загрузка изображений уже не потребуется. Приведем HTML-код документа, содержащего сценарий решения задачи, в листинге 6.9.

Листинг 6.9. Чередование изображений с предварительной загрузкой

<html> <head> <title>Чередование изображений с предварительной загрузкой</title> </head> <script language="JavaScript"> // предварительная загрузка изображений numimg=0 imgslide=new Array() imgslide[0]=new Image() imgslide[1]=new Image() imgslide[2]=new Image() imgslide[3]=new Image() imgslide[0].src="sl1.jpg" imgslide[1].src="sl2.jpg" imgslide[2].src="sl3.jpg" imgslide[3].src="sl4.jpg" // чередование изображений function demoslides() { document.images[0].src=imgslide[numimg].src numimg++ if(numimg==4) numimg=0; setTimeout("demoslides()", 1000) } </script> <body bgcolor="#F8F8FF" onLoad="demoslides()"> <p><img src="sl1.jpg"> </body></html>

Пример выполнения

Пройти тест по теме

назад | вверх | вперед