Hey everybody, I'm in the process of making my first ever website. I'm only playing around with things at the moment, and I am trying to add an automatic slide show to the page. I have followed a tutorial and for some reason, the images aren't changing. I have tried to read up on Google and cannot see where I am going wrong. If any is able to help, I would be very grateful.

Here is the code I have so far:

HTML

Code:
<!DOCTYPE html>

<html>
	<head>
		<script type="text/javascript" src="javascript/jquery.js"></script>
		<script type="text/javascript" src="javascript/slideshow.js"></script>
		<link rel="stylesheet" type="text/css" href="stylesheet.css" />
		<title>CSS Test</title>
	</head>

	<body onload="changeImage();">
		<div id="wrapper">

			<div id="headwrapper">

				<div id="logodisplay">

				</div><!--end logodisplay-->

				<div id="address">
					<p>32-34 Chapelgate<br>Retford<br>DN22 6PJ<br>01777 860111<br></p>
				</div> <!--end address -->

				<div id="socialnetworking">

					<img src="images/facebook.png">
					<img src="images/google.png">
					<img src="images/rss.png">
					<img src="images/twitter.png">
					<img src="images/email.png">

				</div><!--end socialnetworking-->

				<div class="navbar"> 

						<ul>
							<li>HOME</li>
							<li>ABOUT US</li>
							<li>WHATS ON</li>
							<li>GALLERY</li>
							<li>CONTACT US</li>
						</ul>

				</div><!--end navbar -->

				
			</div><!--end headwrapper-->

			<div id ="slideshow_container">

				<div id="counter">

					3

				</div> <!-- end counter -->

				<div class="behind">

					<img src="images/image1.jpg" alt="IMAGE">

				</div> <!--end behind -->

				<div class="infront">

					<img src="images/image1.jpg" alt="IMAGE">

				</div> <!--end infront -->

			</div><!-- end slideshow_container -->
			
		</div> <!--end wrapper -->
	</body>
</html>
CSS

Code:
 body {

	background-color: #EEE9E9;
	padding: 0;
	margin: 0;
}

#wrapper {
	width: 78%;
	height: 900px;
	display: block;
	margin: 0px auto;
	background-color: #EDEDED;
}

#headwrapper {
	width: 100%;
	height: 180px;
	display: block;
	margin: 0px auto;
	position: relative;
	background-color: white;
}

.navbar {
	display: block;
	height: 30px;
	width: 100%;
	position: absolute; 
	bottom: 0;
	background-color: #CDC9C9;
}

.navbar ul li {
	position: relative;
	bottom: 10px;
	display: block;
	float: left;
	margin-right: 5px;
	width: 180px;
	color: #FFFFFF;

}

#logodisplay {
	display: block;
	height: 80%;
	width: 45%;
	float: left;
	background-image: url("images/xoxo.png");
	background-repeat: no-repeat;
	margin: 25px;	
	padding: 0;
	margin: 5px;
}

#address p {
	display: block;
	float: right;
	position: absolute; 
	right: 0;
	height: 20%;
	width: 20%;
	color: #CDC9C9;
	font-size: 12pt;
	font-family: Georgia,Utopia,'Palatino Linotype',serif;
	letter-spacing: 1px;
	line-height: 17px;

}

.email {
	color: blue;
}

#socialnetworking {
	display: block;
	float: right;
	position: absolute; 
	right: 0;
	top: 100px;
	height: 20%;
	width: 20%;
}

#socialnetworking img {
	height: 16px;
	width: 16px;
	display: block;
	float: left;
	padding-right: 4px;
}

#slideshow_container {
	width: 900px;
	height: 500px;
	margin: 10px auto;
	overflow: hidden;
}

#slideshow_container div {
	width: 900px;
	height: 500px;
	position: absolute;

}
JAVASCRIPT SLIDESHOW

Code:
// Javascript Document

function changeImage () {
	var imagesInShow ="3";
	var currentImage = $ ("#counter").html();
	currentImage = parseInt ( currentImage );

	if (currentImage == imagesInShow) {
		var nextImage = 1;
	} 

	else 

	{
		var nextImage = currentImage + 1;
	}

	var currentSrc = $(".infront img").attr("src");
	var nextSrc = "images/image" + nextImage + ".jpg";

	$ (".behind img").attr("src" , currentSrc);
	$ (".infront").css("display" , "none");

	$(".infront img").attr("src" , nextSrc);

	$(".infront").fadeIn(700);

	$("#counter").html( nextImage);

	// !!!IMPORTANT!!!
	setTimeout('changeImage'()',5000);

}

#(document).ready( function() ;
JAVESCRIPT JQUERY

This can be found here as it's pretty long!

Cheers