Hola a todos como estan? Tengo este codigo con jquery,tengo que agregar al pie del slider unos cuadraditos o circulos tipicos de los sliders,uno por cada imagen y que se vaya moviendo a medida que se cambia la imagen: es decir imagen1 y se muestre el cuadradito 1 y asi sucesivamente, he buscado muchisimos ejemplos pero no he encontrado uno puntual asi,si alguien sabe que codigo agregar o algun ejemplo puntual, se lo agradezco
Aca esta el codigo completo para que pueden verlo,faltan solos las 3 imagenes y archivo jquery normal,saludos
-------------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function animacion(){
$("#texto3").slideDown(4000, function(){
$("#texto3").css("display", "none")
$("#texto2").slideDown(4000, function(){
$("#texto2").css("display", "none")
$("#texto1").slideDown(4000, function(){
$("#texto1").css("display", "none")
})})});
$("#foto3").animate({"left": "+=600px"}, 4000, function(){
$("#foto2").animate({"left": "+=600px"}, 4000, function(){
$("#foto1").animate({"left": "+=600px"}, 4000, function(){
$("#foto3").css("left", "0")
$("#foto2").css("left", "0")
$("#foto1").css("left", "0")
animacion();
})})});
}
animacion();
});
</script>
<style type="text/css">
#imagenes{
width: 600px;
height: 450px;
border: 1px solid grey;
position: relative;
overflow: hidden;
background-image: url(foto1.jpg)
}
#foto1, #foto2, #foto3{
display: block;
position: absolute;
}
#texto1, #texto2, #texto3{
display: none;
position: absolute;
text-align: center;
width: 600px;
height: 30px;
padding-top: 10px;
vertical-align: bottom;
background-color: #000000;
color: #FFFFFF;
opacity: 0.3;
filter: alpha(opacity=30);
}
</style>
</head>
<body>
<h2>Slider</h2>
<div id="imagenes">
<img src="foto3.jpg" id="foto1" />
<img src="foto2.jpg" id="foto2" />
<img src="foto1.jpg" id="foto3" />
<div id="texto1">Esta es la descripcion de la foto 1</div>
<div id="texto2">Esta es la descripcion de la foto 2</div>
<div id="texto3">Esta es la descripcion de la foto 3</div>
</div>
</body>
</html>