Hi all,

I have a demo slideshow code here that wont seem to work, i drew this up with no testing and was trying to test myself to see if i could do it. many, many hours down the line im stumped. I cannot see any problems with the code but evidently there is.

Could someone please write back with either reasons why its not working or a fix.

Please also be aware im still a young programmer and therefore please explain any posts that you submt back to me.
Code:
<html>
<meta charset="utf-8">
<head>
<style>
#picture
{
width:255px;
height:200px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding-top:0px;
}

input.css
{
color:#00248F;
font-weight:bold;
text-size:84%;
border:1px solid #00248F;
filter:progid:DXImageTransform.Microsoft.Gradient  (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#B2BDDD');
}

input.css2
{
color:#4D66B1;
font-weight:bold;
text-size:84%;
border:1px solid #00248F;
filter:progid:DXImageTransform.Microsoft.Gradient  (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#C1CAE4');
</style>

<script type="text/javascript">
var counter= 1;
var istrue = false;
var timedelay=4000;
var images =
	[
	"image1",
	"image2",
	"image3"
	]
;
var running;

document.slideshow.src=images[counter-1]; <!--starts the slideshow at the first image-->

function start()
{
	if(!istrue) 
	{
	istrue ==true;
	counter = counter++;
	document.slideshow.src=images[counter-1];  <!--Changes to the next image when called-->
	}


	if(counter==images.length)  <!--goes back to the starting image when at the end-->
	{
	counter==1
	}
}

function pauseandplay()
{
	if(istrue)
	{
	istrue==false;
	running= setIntervals(start(),timedelay); <!--starts the slideshow and changes the boolean ready for when clicked again-->
        }
	else if(!istrue)
	{
	window.clearInterval(running);  <!--pauses the slideshow and changes the boolean to be ready for when clicked again, this time to start the slideshow-->
	istrue==true;
	}
}

function direct(direction)
{

var imagenumber = counter + direction;

	if(imagenumber=images.length) <!--if the function is called when the last image is being displayed resets the counter to show the first image in the array-->
	{
	imagenumber==0
	}
	
	if(imagenumber <0)
	{
	imagenumber==images.length -1; <!--if the function is called when the first image is being displayed with a minus direction, resets the counter to show the last image in the array-->
	}

	if(istrue)
	{
	istrue ==false;
	document.slideshow.src=images[imagenumber]; <!--shows the selected image and clears the loop if not paused-->
	window.clearInterval(running);
	}

	
}
</script>
</head>

<bod>
<img src="http://media.gdgt.com/img/product/15/brs/google-chrome-os-od0-800.jpg" name="slideshow" id="picture">
<div id="wrapping" style="margin-left:auto;margin-right:auto;background-color:silver;">
<input type="button" value="Last" class="css" onclick="direct(-1)" onmouseout="this.className='css'" onmouseover="this.className='css2'";>
 <input type="button" value="Pause/Play" class="css" onclick="pauseandplay()" onmouseout="this.className='css'" onmouseover="this.className='css2'";>
<input type="button" value="Next" class="css" onclick="direct(1)" onmouseout="this.className='css'" onmouseover="this.className='css2'";>
</div>
</body>
</html>
Thanks for all and any help.