Revolving image wont show when I view it in live browser

[gemzilla]

Below is to a website I'm starting

http://kent-telephones.ismywebsite.co.uk/

I have used an online source that provided me with CSS, HTML and JS so I can have a revolving picture like most websites have at the moment and I'm trying to steer clear of flash.

When I do a local preview of the website the revolving picture works, but it is not in the correct position. When I upload it to the web it doesn't show up at all. I don't know if this is a copyright issue or if I have done something wrong, but could someone point me in the right direction. Below is the CSS and JS, HTML can be found in the source.


CSS

body {
	font-family:Tahoma, Verdana, Arial;
	color:#000;
	font-size:12px;
}

#headwrap {
	width:100%;
	height:auto;
	overflow:hidden;
}

#banner {
	width:100%;
	height:75px;
	overflow:hidden;
}

.logo {
	position:relative;
	display:block;
	width:200px;
	height:auto;
	float:left;
	left:10px;
	top:10px;
}

/*-------Logos------*/

#logos {
	position:relative;
	width:61.64%;
	height:30px;
	float:right;
	top:5px;
	margin-right:10px;
}

#logos ul {
	width:100%;
	height:30px;
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:right;
	overflow:hidden;
}

#logos ul li {
	margin-left:5px;
	padding:0;
	display:inline;
	height:30px;
}

#logos ul li a img {
	display:inline;
	height:30px;
	text-decoration:none;
	border:none;
}

/*-------Logos------*/

/*-------ROTATING IMAGE------*/

#rotating-item-wrapper {
	position: relative;
	width: 100%;
	height: auto;
}

#rotating-item-wrapper img {
	width:100%;
	height:auto;
}

.rotating-item {
	display: none;
	position: absolute;
}

/*-------ROTATING IMAGE------*/


/*-------MENU------*/

#menu {
	position:relative;
	width:61.64%;
	height:30px;
	float:right;
	top:10px;
	margin-right:10px;
	font-family:"Agency FB", Tahoma, Verdana, Arial;
	font-size:20px;
}

#menu ul {
	width:100%;
	height:30px;
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:right;
	overflow:hidden;
}

#menu ul li {
	margin-left:10px;
	padding:0;
	display:inline;
	height:30px;
	line-height:25px;
}

#menu ul li a {
	display:inline;
	height:30px;
	text-decoration:none;
	color:#000;
}

#menu ul li a:hover {
	color:#0033FF;
}

/*-------MENU------*/



/*-------SUB MENU------*/

#submenu {
	position:relative;
	width:100%;
	height:30px;
	font-family:"Agency FB", Tahoma, Verdana, Arial;
	font-size:20px;
	
	-moz-box-shadow: 0 3px 6px #999;
 	-webkit-box-shadow: 0 3px 6px #999;
 	box-shadow: 0 3px 6px #999; 
}

#pagetitle {
	width:auto;
	height:30px;
	line-height:30px;
	padding-left:10px;
	padding-right:10px;
	float:left;
	font-weight:bold;
	color:#FFF;
	background-image:url(../images/pagetitlebg.jpg);
	background-repeat:repeat-x;
}

#pagearrow {
	float:left;
	width:10px;
	height:30px;
	background-image:url(../images/pagetitleend.jpg);
}

#submenu ul {
	width:auto;
	height:30px;
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:left;
	overflow:hidden;
}

#submenu ul li {
	margin-left:10px;
	padding:0;
	display:inline;
	height:30px;
	line-height:25px;
}

#submenu ul li a {
	display:inline;
	height:30px;
	text-decoration:none;
	color:#000;
}

#submenu ul li a:hover {
	color:#0033FF;
}

/*-------SUB MENU------*/

JS

// Copyright (c) 2010 TrendMedia Technologies, Inc., Brian McNitt. 
// All rights reserved.
//
// Released under the GPL license
// http://www.opensource.org/licenses/gpl-license.php
//
// **********************************************************************
// This program is distributed in the hope that it will be useful, but
// WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
// **********************************************************************

$(window).load(function() {	//start after HTML, images have loaded

	var InfiniteRotator = 
	{
		init: function()
		{
			//initial fade-in time (in milliseconds)
			var initialFadeIn = 1000;
			
			//interval between items (in milliseconds)
			var itemInterval = 5000;
			
			//cross-fade time (in milliseconds)
			var fadeTime = 2500;
			
			//count number of items
			var numberOfItems = $('.rotating-item').length;

			//set current item
			var currentItem = 0;

			//show first item
			$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

			//loop through the items		
			var infiniteLoop = setInterval(function(){
				$('.rotating-item').eq(currentItem).fadeOut(fadeTime);

				if(currentItem == numberOfItems -1){
					currentItem = 0;
				}else{
					currentItem++;
				}
				$('.rotating-item').eq(currentItem).fadeIn(fadeTime);

			}, itemInterval);	
		}	
	};

	InfiniteRotator.init();
	
});

[jscheuer1]

Move (don't copy, move) it to the top of the banner div:

<div id="banner">
<div id="rotating-item-wrapper">
	<img src="images/bannerpicture1.jpg" alt="" class="rotating-item"/>
    <img src="images/bannerpicture2.jpg" alt="" class="rotating-item"/>
    <img src="images/bannerpicture3.jpg" alt="" class="rotating-item"/>
    <img src="images/bannerpicture4.jpg" alt="" class="rotating-item"/>   
</div>

	<img class="logo" src="images/Logo.jpg">
    
    <div id="logos">
    	<ul>
        	<li><a href="#"><img src="images/fblogo.jpg"></a></li>
            <li><a href="#"><img src="images/twlogo.jpg"></a></li>
            <li><a href="#"><img src="images/iso . . .

And add this script (highlighted) as shown:

<div id="foot">

</div>
<script type="text/javascript">
$(window).bind('load resize', function(){
		$('#banner').height($('#rotating-item-wrapper img').height());
	});
</script>
</body>
</html>

The browser cache may need to be cleared and/or the page refreshed to see changes.

There could also be other problems.