All I'm trying to do is set up a simple slide show using the commands Start,Pause,Faster and Slower to go through a couple slides but I'm having trouble getting it set up.
<html>
<head>
<script type="text\javascript">
var showing=null, // Is the showing going? no - null
pause=true, // Does the pause button say pause
start=true, // Does the start button say start
current_pic=0, // Current picture on the screen
pics=[ // Pictures
"Baybridge.jpg",
"Bridgenight.jpg",
"Brooklynbridge.jpg"
"SFbridge.jpg"
],
max_pics=pics.length, // Number of pictures
interval_start=1000, // Default starting interval
interval=interval_start, // Current interval
interval_change=200; // Incremental interval changes
/************************************************************
* *
* Function: show *
* Show the next picture *
* *
* Parameters: None *
* *
* Return : None *
* *
************************************************************/
function show()
{
current_pic++;
if (current_pic>=max_pics) current_pic=0; // cycle back
document.getElementById("image").src=pics "Baybridge.jpg" ;
}
/************************************************************
* *
* Function: show_start_stop *
* Start/Stop the show *
* *
* Parameters: None *
* *
* Return : None *
* *
************************************************************/
function show_start_stop()
{
if (start)
{
showing=setInterval("show()", interval);
start=false;
document.getElementById("start").value="Stop";
}
else // button say stop
{
clearInterval(showing);
showing=null;
pause=true;
document.getElementById("pause").value="Pause";
start=true
document.getElementById("start").value="Start";
interval=interval_start;
current_pic=0;
document.getElementById("image").src=pics"Baybridge.jpg";
}
}
/************************************************************
* *
* Function: show_pause_continue *
* Pause or continue the show *
* *
* Parameters: None *
* *
* Return : None *
* *
************************************************************/
function show_pause_continue()
{
if(showing==null) return; // Show going?
if(pause) // Button say pause?
{
clearInterval(showing);
pause=false;
document.getElementById("pause").value="Continue";
}
else // Button say continue
{
showing=setInterval("show()", interval);
pause=true;
document.getElementById("pause").value="Pause";
}
}
/************************************************************
* *
* Function: show_faster *
* Reduce the interval between pictures *
* *
* Parameters: None *
* *
* Return : None *
* *
************************************************************/
function show_faster()
{
if (showing == null) return; // Show going on?
if (interval<=interval_change) return; // Too slow already?
interval-=interval_change;
clearInterval(showing);
if (pause==false) return; // Pausing?
showing=setInterval("show()", interval); // Continue
}
/************************************************************
* *
* Function: show_slower *
* Increase the interval between pictures *
* *
* Parameters: None *
* *
* Return : None *
* *
************************************************************/
function show_slower()
{
if (showing == null) return; // Show going on?
interval+=interval_change;
clearInterval(showing);
if (pause==false) return; // Pausing?
showing=setInterval("show()", interval); // Continue
}
</script>
</head>
<body>
<!Image>
<img id="image" src="Baybridge.jpg" height=400 width=400> <br />
<! Buttons >
<form>
<input type=button name="start" value=Start
onclick="show_start_stop();">
<input type=button name="pause" value=Pause
onclick="show_pause_continue();">
<input type=button value=Faster onclick="show_faster();">
<input type=button value=Slower onclick="show_slower();">
</form>
</body>
</html>
