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.