Inserire autoplay a una slide di immagini

[fabio.99999]

Ciao a tutti!

Ho creato una slide con immagini da inserire nella homepage del mio sito, ma visto che conosco da ieri JavaScript mi sono perso eheeheheh
Mi sono rimaste delle lacune con le funzioni e quindi non riesco a crearne una funzionante che possa far scorrere in automatico le immagini orizzontalmente con un effetto di dissolvenza o simile.


Ecco qui la slide in HTML:

<div id="slider">
	<ul>
	<li id="foto1"><a href="link" title=""><img src="http://forum.mrwebmaster.it/jquery/jquery/Logo_T.R.a..png" width="900" height="500" alt=""></a></li>
	<li id="foto2"><a href="link" title=""><img src="foto_cani_327.jpg" width="900" height="500" alt=""></a></li>
	<li id="foto3"><a href="link" title=""><img src="Sfondo Mattoni.jpg" width="900" height="500" alt=""></a></li>
	<li id="foto4"><a href="ling" title=""><img src="tbbt.jpg" width="900" height="500" alt=""></a></li>
	<li id="foto5"><a href="link" title=""><img src="image" width="900" height="500" alt=""></a></li>
        <li id="foto6"><a href="link" title=""><img src="image" width="900" height="500" alt=""></a></li>
        <li id="foto7"><a href="link" title=""><img src="image" width="900" height="500" alt=""></a></li>
        <li id="foto8"><a href="link" title=""><img src="image" width="900" height="500" alt=""></a></li>
	</ul>
</div>
<div id="slider-menu">
	<ul>
		<li><a href="#foto1">Image</a></li>
		<li><a href="#foto2">Image</a></li>
		<li><a href="#foto3">Image</a></li>
		<li><a href="#foto4">Image</a></li>
		<li><a href="#foto5">Image</a></li>
                <li><a href="#foto6">Image</a></li>
                <li><a href="#foto7">Image</a></li>
                <li><a href="#foto8">Image</a></li>
	</ul>

E qui il CSS:

#slider { /*menu slideshow con foto*/
	width: 900px; height: 500px;
	overflow-y: hidden;
	margin: 75px auto 50px auto;
	-moz-box-shadow: 0px 0px 33px #000000;
	-webkit-box-shadow: 0px 0px 33px #000000;
	box-shadow: 0px 0px 33px #000000;
	border:none 5px #000000;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright:5px;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	margin-left: 60px;
}

#slider ul {
	width: 4000px; list-style: none; 
	
}
#slider ul li {
	float: left;
}
	

#slider-menu {
	width: 185px; margin: 0 auto 100px auto; visibility: hidden;
}	
#slider-menu ul {
	list-style: none; 
}
#slider-menu ul li {
	float: left; 
}
#slider-menu ul li a { /* menù pallini neri sotto-foto*/
	display: block; width: 15px; height: 10px;
	border:solid 1px #000000;
	margin: 0 10px;
	background-color: #fff; text-indent: -9999px;
	border-radius: 15px;
        -moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-box-shadow:inset 3px 3px 13px #000000;
	-webkit-box-shadow:inset 3px 3px 13px #000000;
	box-shadow:inset 3px 3px 13px #000000;
	text-align: center;
}
#slider-menu ul li a:hover, #slider-menu ul li a.active {
	background-color: #000000;
}

Dovrebbe esserci tutto.. C'è qualcuno che possa darmi una mano a creare sta funzione? Grazie!