Rotating Banners with TimeOut function not working?
<p>The rotating banners will not rotate. Im not sure what I did wrong in the codes below. Basically, I upgraded the functionality of the rotating banners in jQuery from the old javascript. There are five banners and each one need to rotate based on the TimeOut function. </p>

<p>HTML:</p>

<pre><code>    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
    &lt;title&gt;Rotating Banners in jQuery&lt;/title&gt;
    &lt;link href="rotStyle.css" rel="stylesheet" type="text/css" /&gt;
    &lt;script type="text/javascript" src="rotScript.js"&gt;&lt;/script&gt;
    &lt;script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class="slideshow"&gt;
    &lt;ul class="slides"&gt;
        &lt;li style="visibility:visible" class="slide" id="image1"&gt;&lt;a href="#"&gt;&lt;img alt="AT&amp;T" src="banner.att.en.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="slide" id="image2"&gt;&lt;a href="#"&gt;&lt;img alt="US Cellular" src="banner.uscellular.user.en.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="slide" id="image3"&gt;&lt;a href="#"&gt;&lt;img alt="Verizon" src="banner.verizon.en.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="slide" id="image4"&gt;&lt;a href="#"&gt;&lt;img alt="Wi-Fi" src="banner.wifi.en.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="slide" id="image5"&gt;&lt;a href="#"&gt;&lt;img alt="Wi-Fi" src="banner.wifi2.en.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>CSS:</p>

<pre><code>font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
margin-left:40px;
background-color:#e5e5e5;
}

/* begin: slideshow */
.slideshow {
position:relative;
padding:0;
margin:0;
}
.slideshow a img {
border:none;
}
.slideshow li.slide {
list-style-type:none;
}
.slideshow .slides {
height:230px;
margin:0;
}
.slideshow .slides li.slide {
visibility:hidden;
position:absolute;
left:0px;
top:0;
}
.slideshow .buttons {
display:none;
}
.slideshow .buttons {
display:block;
position:absolute;
z-index:100;
left:0px;
bottom:20px;
margin:0;
}
.slideshow .buttons li {
float:left;
display:inline;
width:24px;
height:24px;
margin:0;
padding-left:11px;
line-height:30px;
background-image:url('buttonBg.png');
background-repeat:no-repeat;
}
.slideshow .buttons li a {
float:left;
text-decoration:none;
width:30px;
height:30px;
color:#fff;
outline:0;
}
.slideshow ul.buttons li a:hover {
text-decoration:none;
color:#0a0a0a;
}
.slideshow ul.buttons li.active a:hover,
.slideshow ul.buttons li.active a {
color:#666666;
}
/* end: slideshow */
</code></pre>

<p>jQuery:</p>

<pre><code>jQuery(function($) {
var timer;
function button1_click(event)
{
$(".slide").css("visibility","hidden");
$("#image1").css("visibility","visible");
$("#image1").css("opacity","0");
$("#image1").animate({"opacity":1},300, "linear", null);
$("ul.buttons li").removeClass("active");
$("#image1").animate({"opacity":1},300, "linear", null);
$("#button1").addClass("active");
clearTimeout(timer);
timer = setTimeout(button2_click, 3000);
$("#image1").animate({"opacity":1},300, "linear", null);
}

function button2_click(event)
{
$(".slide").css("visibility","hidden");
$("#image2").css("visibility","visible");
$("#image2").css("opacity","0");
$("#image2").animate({"opacity":1},300, "linear", null);
$("ul.buttons li").removeClass("active");
$("#image2").animate({"opacity":1},300, "linear", null);
$("#button2").addClass("active");
clearTimeout(timer);
timer = setTimeout(button3_click, 3000);
$("#image2").animate({"opacity":1},300, "linear", null);
}

function button3_click(event)
{
$(".slide").css("visibility","hidden");
$("#image3").css("visibility","visible");
$("#image3").css("opacity","0");
$("#image3").animate({"opacity":1},300, "linear", null);
$("ul.buttons li").removeClass("active");
$("#image3").animate({"opacity":1},300, "linear", null);
$("#button3").addClass("active");
clearTimeout(timer);
timer = setTimeout(button4_click, 3000);
$("#image3").animate({"opacity":1},300, "linear", null);
}

function button4_click(event)
{
$(".slide").css("visibility","hidden");
$("#image4").css("visibility","visible");
$("#image4").css("opacity","0");
$("#image4").animate({"opacity":1},300, "linear", null);
$("ul.buttons li").removeClass("active");
$("#image4").animate({"opacity":1},300, "linear", null);
$("#button4").addClass("active");
clearTimeout(timer);
timer = setTimeout(button5_click, 3000);
$("#image4").animate({"opacity":1},300, "linear", null);
}


function button5_click(event)
{
$(".slide").css("visibility","hidden");
$("#image5").css("visibility","visible");
$("#image5").css("opacity","0");
$("#image5").animate({"opacity":1},300, "linear", null);
$("ul.buttons li").removeClass("active");
$("#image5").animate({"opacity":1},300, "linear", null);
$("#button5").addClass("active");
clearTimeout(timer);
timer = setTimeout(button1_click, 3000);
$("#image5").animate({"opacity":1},300, "linear", null);
}

function OnLoad(event)
{
clearTimeout(timer);
timer = setTimeout(button2_click, 3000);
}

$('#button1').bind('click', button1_click);

$('#button2').bind('click', button2_click);

$('#button3').bind('click', button3_click);

OnLoad();

});
</code></pre>
