<div id="ayax1"><div id="ayaximages" style="left: -3000px; ">

<a href="URL1" ><img src="URLIMAGE1"></a>

<a href="URL2" ><img src="URLIMAGE2"></a>
<a href="URL3" ><img src="URLIMAGE3"></a>
<a href="URL4" ><img src="URLIMAGE4"></a>
<a href="URL5" ><img src="URLIMAGE5"></a>
<a href="URL6" ><img src="URLIMAGE6"></a>
<a href="URL7" ><img src="URLIMAGE7"></a>
<a href="URL8" ><img src="URLIMAGE8"></a>
</div></div><div id="ayaxlinks">
<a onclick="srcANIMayax(0);" href="javascript:void(0);">1</a>
<a onclick="srcANIMayax(1);" href="javascript:void(0);">2</a>
<a onclick="srcANIMayax(2);" href="javascript:void(0);">3</a>
<a onclick="srcANIMayax(0);" href="javascript:void(0);">4</a>
<a onclick="srcANIMayax(1);" href="javascript:void(0);">5</a>
<a onclick="srcANIMayax(2);" href="javascript:void(0);">6</a>
<a onclick="srcANIMayax(6);" href="javascript:void(0);">7</a>
<a onclick="srcANIMayax(7);" href="javascript:void(0);">8</a></div>

<style>
#ayax1 { height: 375px; width: 500px;
margin: 0 auto;
overflow: hidden;
position: relative;
-moz-border-shadow: 0 0 10px black;
border-shadow: 0 0 10px black;
-webkit-border-shadow: 0 0 10px black;
-o-border-shadow: 0 0 10px black;
}
#ayaximages { position:absolute;
left: 0; top: 0;
width: 3500px;
moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s.ease-in-out;
-o-transition:all 1s.ease-in-out;
transition:all 1s ease-in-out;
}
/* las imgenes, tamao height y width*/
#ayaximages img {-moz-transition:all 4s ease-in-out;
-webkit-transition:all 4s.ease-in-out;
-o-transition:all 4s.ease-in-out;
transition:all 4s ease-in-out;
height: 375px;
width: 500px;
}

/* Ahora los botones , donde se cambia la visualizacin y colores*/
#ayaxlinks {padding: 7px 0;
width: 600px;
background-image: none;
background-repeat: repeat-x;
background-color: #;
border: 1px #000000:;
text-align: center;
margin-right: 250px;}
/* el HOVER al pasar el mouse sobre los botones*/
#ayaxlinks:hover {padding: 7px 0;width: 600px;background-image: none;background-
repeat: repeat-x;background-color: #;border: 1px #000000:;text-align: center;margin-
top:1px;}
/* EL COLOR DE EL TEXTO/LINKS */
#ayaxlinks a { background-color: #292929; border-radius: 8px; box-shadow: 0 0 5px
#292929; margin: 0 2px; padding: 10px 10px; text-decoration: none;}
/* HOVER DE LOS LINKS AL PASAR EL MOUSE */
#ayaxlinks a:hover { box-shadow: 0 0 8px #292929; color: white; text-shadow:2px 2px
2px; black}
</style>
<script>
//<![CDATA[
function srcANIMayax(num) {
var mover = num * 500;
document.getElementById("ayaximages").style.left = -mover + "px";
}
//]]>
</script>