Slide Show

Slide Show : img : HTML Tags JAVASCRIPT TUTORIALS

JAVASCRIPT TUTORIALS » HTML Tags » img »

Slide Show



<HTML>
<HEAD>
<TITLE>Slide Show</TITLE>
</HEAD>
<BODY bgcolor=black text=white>
<SCRIPT>
var picArray = new Array("",1.jpg", "2.jpg", "3.jpg", "4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg");
var picIndex = 1;
var timeOutId;

function inOrder() {
   showPic(picIndex);   
   picIndex ++;
   if (picIndex > 10) 
       picIndex = 1;
   status = picIndex;
   timeOutId=setTimeout("inOrder();",1000);
}
function showRandom() {
   picIndex = Math.floor(Math.random() * 11);
   if (picIndex == 0)
      picIndex = 1;
   showPic(picIndex);   
   status = picIndex;
   timeOutId=setTimeout("showRandom();",1000);
}
function showPic(i) {
   document.images[0].src=picArray[i];
}
</SCRIPT>
<H1>View a slide show!</H1>
<FORM>
<TABLE>
<TR><TD>
<INPUT type=button value="Show in Order" name=theButton onClick="inOrder();">
</TD><TD>
<INPUT type=button value="Random and Repeat" name=theButton onClick="showRandom();">
</TD><TD>
<INPUT type=button value="Stop" name=theButton onClick="clearTimeout(timeOutId);">
</TD></TR>
</TABLE><BR>
</FORM>
<IMG name=slideshow src="6.jpg" width=500 border=5>
</BODY>
</HTML>