How to make a product slideshow for your website's homepage using javascript

	<div id="banners">
		<div id="banner1">
			<img src="banner1.jpg">
			<span>Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius -- and a lot of courage -- to move in the opposite direction.</span>
		</div>	
		<div id="banner2">
			<img src="banner2.jpg">
			<span>Imagination is more important than knowledge.</span>

		</div>	
		<div id="banner3">
			<img src="banner3.jpg">
			<span>Gravitation is not responsible for people falling in love.</span>
		</div>	
		<div id="banner4">
			<img src="banner4.jpg">
			<span>I want to know God's thoughts; the rest are details.</span>
		</div>	
		<ul>
			<li><a href="/1/">1</a></li>
			<li><a href="/2/">2</a></li>
			<li><a href="/3/">3</a></li>
			<li><a href="/4/">4</a></li>
		</ul>
	</div>
	<script>bannertime = 1000;banner_init();</script>

body
{
	/*ie needs this*/
	margin:0px;
	padding:0px;
	/*set global font settings*/
	font-size:10px;
	font-family:Tahoma,Verdana,Arial;
}
#banners
{
	width:500px;
	height:275px;
	border:2px solid #cccccc;
}

#banners div
{
	width:500px;
	height:250px;
	display:none;
	margin:0px;

}

#banners #banner1
{
	display:block;
}

#banners div span
{
	width:350px;
	position:relative;
	display:block;
	top:-150px;
	line-height:1.5em;
	left:10px;
	background:#fff;
	font-size:1.2em;
	padding:5px;
	opacity:0.7;//standard
	filter:alpha(opacity=50);//internet explorer
	-moz-opacity:.50;//older firefox versions
	
}

#banners ul
{
	width:auto;
	height:25px;
	background:#0063DC;
	margin:0px;
}

#banners ul li
{
	display:inline;
	width:10px;
}

#banners ul li a
{
	text-decoration:none;
	padding:5px;
	line-height:2.5em;
	margin:5px;
	color:#fff;
	height:25px;
	font-weight:bold;
}

#banners ul li a:hover
{
	background:#fff;
	color:#0063DC;	
}

var current_banner = 1;
var total_banners = 0;
var wait = 0;

function banner_init()
{

	//stop banner change if mouse over one banner
	elements = document.getElementById('banners').getElementsByTagName('div');
	total_banners = elements.length;
	for (var i = 0; i < elements.length; i++) 
	{ 
		elements[i].onmouseover = function () 
		{

			clearTimeout(wait);
		}
 		elements[i].onmouseout = function () 
		{

			clearTimeout(wait);

			wait = setTimeout('nextBanner()',bannertime);

		}	
	}
	//set navigation
	elements = document.getElementById('banners').getElementsByTagName('ul')[0].getElementsByTagName('li');
	total_banners = elements.length;
	for (var i = 0; i < elements.length; i++) 
	{ 
		elements[i].title = i + 1;
		elements[i].onmouseover = function () 
		{

			banner(this.title);
			clearTimeout(wait);
		}
		elements[i].onmouseout = function () 
		{

			clearTimeout(wait);

			wait = setTimeout('nextBanner()',bannertime);

		}	
	}
	wait = setTimeout('nextBanner()',bannertime);
} 


function banner(nr)
{
	clearTimeout(wait);
	elements = document.getElementById('banners').getElementsByTagName('div');
	//hide all divs
	for (var i = 0; i < elements.length; i++) 
	{ 
		if (nr == (i + 1))
		{
			//show selected banner	
			elements[i].style.display = "block";
		} else
		{	//hide everything else
			elements[i].style.display = "none";	
		}
	}
	wait = setTimeout('nextBanner()',bannertime);
}


function nextBanner() 
{

	if(current_banner < total_banners) 
	{
		current_banner ++; 
	}

	else
	{	current_banner = 1;
	}

	banner(current_banner);
}

<?php 
//this is a simple example on how you can pull your data from the database to generate the product slideshow
$link = mysqli_connect('localhost','root','');
mysqli_select_db($link,'mydatabase');
?>
<div id="banners">
<?php
$slides = 0;//slide counter
//get all rows
$query = mysqli_query($link,'SELECT * FROM product_slideshow');
while ( $row = mysqli_fetch_assoc($query) )
{
	$slides++;
?>
<div id="banner1">
	<img src="banner<?php echo $slides?>.jpg">
	<span><?php echo description;?></span>
</div>	
<?php
}
//generate links and numbering
for ($i =0; $i < $slides;$i++)
{
?>
	<li><a href="/products/myproduct-<?php echo $i?>.html"><?php echo $i?></a></li>
<?php
}
?>
</div>
<script>bannertime = 2000;banner_init();</script>