Напишем сценарий, который позволяет последовательно просматривать изображения, переходя либо к предыдущему, либо к следующему изображению с помощью кнопок.
Листинг 6.8. Последовательный просмотр рисунков с предварительной загрузкой
|
|
<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="s1.gif" imgslide[1].src="s2.gif" imgslide[2].src="s3.gif" imgslide[3].src="s4.gif" //последовательная смена изображений function dem(n) { document.images[0].src=imgslide[numimg].src if (n == 1) { numimg++ if(numimg==4) numimg=0; } else {numimg-- if(numimg==-1) numimg=3; } } </script> </head> <body bgcolor="#FFFFFF""> <h4>Предыдущее и cледующее и изображения</h4> <img src="s1.gif"> <form name =form1> <input type=button value=Предыдующее onClick="dem(0)"> <input type=button value=Следующее onClick="dem(1)"> </form></body></html>
|
|
Пример выполнения