Consiste en que hay una imagen con su titulo, y debajo botones en lista ul li y que al clickear, se van pasando las imagenes..
Ademas, si no se clickea el boton, las imagenes van corriendo automaticamente, con un efecto fade.
Resulta que hasta ayer me andaba, y con el correr del diseño de mi sitio, lo volvi a probar y ya no anda el click del boton, o sea, las imagenes corren solas, pero no cambian al pulsar..
Este es el codigo JS:
Código HTML:
<script type="text/javascript"> function slideshow_start() { aktiv = setInterval("slideshow()",7500); } promo_id = 2; slideshow_start(); function slideshow() { switch (promo_id) { case 1: change1(); break; case 2: change2(); break; case 3: change3(); break; case 4: change4(); break; } promo_id++; if (promo_id > 4) { promo_id = 1; } } function change1() { $("#promo1").fadeIn(1000); $("#promo2").fadeOut(1000); $("#promo3").fadeOut(1000); $("#promo4").fadeOut(1000); $("#selector li").removeClass("active"); $("#select-promo-1").addClass("active"); } function change2() { $("#promo1").fadeOut(1000); $("#promo2").fadeIn(1000); $("#promo3").fadeOut(1000); $("#promo4").fadeOut(1000); $("#selector li").removeClass("active"); $("#select-promo-2").addClass("active"); } function change3() { $("#promo1").fadeOut(1000); $("#promo2").fadeOut(1000); $("#promo3").fadeIn(1000); $("#promo4").fadeOut(1000); $("#selector li").removeClass("active"); $("#select-promo-3").addClass("active"); } function change4() { $("#promo1").fadeOut(1000); $("#promo2").fadeOut(1000); $("#promo3").fadeOut(1000); $("#promo4").fadeIn(1000); $("#selector li").removeClass("active"); $("#select-promo-4").addClass("active"); } $(document).ready(function(){ $("#select-promo-1 a").click(function(event) { change1(); clearInterval(aktiv); }); }); $(document).ready(function(){ $("#select-promo-2 a").click(function(event) { change2(); clearInterval(aktiv); }); }); $(document).ready(function(){ $("#select-promo-3 a").click(function(event) { change3(); clearInterval(aktiv); }); }); $(document).ready(function(){ $("#select-promo-4 a").click(function(event) { change4(); clearInterval(aktiv); }); }); </script>
Código HTML:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
Código HTML:
<div id="teaser_1_1"> <div id="promo1" style="display: block; "> <a href="#"><img src="img/BORRAR.jpg" alt="Sabella"></a> <div class="img_ppal_txt" align="left"> <a class="titulo" id="titulo" href="#" title="#"> Sabella: "No me voy a ir de Estudiantes"</a></div> </div> <div id="promo2" style="display: none; "> <a href="#"><img src="img/BORRAR4.jpg" alt="Sabella"></a> <div class="img_ppal_txt" align="left"> <a class="titulo" id="titulo" href="#" title="#"> Mercado ya es jugador de Estudiantes </a></div> </div> <div id="promo3" style="display: none; "> <a href="#"><img src="img/BORRAR5.jpg" alt="Sabella"></a> <div class="img_ppal_txt" align="left"> <a class="titulo" id="titulo" href="#" title="#"> Cellay ya es jugador de Boca y maana se despide </a></div> </div> <div id="promo4" style="display: none; "> <a href="#"><img src="img/BORRAR.jpg" alt="Sabella"></a> <div class="img_ppal_txt" align="left"> <a class="titulo" id="titulo" href="#" title="#"> Sabella conforme con las fechas del fixture </a></div> </div> <ul id="selector"> <li id="select-promo-1" class="active"><a href="#">BOTON 1</a></li> <li id="select-promo-2" class=""><a href="#">BOTON 2</a></li> <li id="select-promo-3" class=""><a href="#">CBOTON 3</a></li> <li id="select-promo-4" class=""><a href="#">BOTONN 4</a></li> </ul> </div>
El ejemplo descargado anda a la perfeccion, pero en mi sitio al ckickear sobre el boton 1 o 2 o 3 o 4 no cambia la foto..
Lo copie a la perfeccion, todo igual, que falta ? Hace 1 semana me anda bien..
Este es el CSS:
Código:
Los ID en los botones estan bien dirigidos, que esta fallando ?#teaser_1_1 {
position: relative;
overflow: hidden;
width: 627px;
height: 264px;
}
#teaser_1_1 img {
border: 0; }
#teaser img {
margin: 0 8px 9px 0;
border: 0; }
#teaser_1_1 #promo1,
#teaser_1_1 #promo2,
#teaser_1_1 #promo3,
#teaser_1_1 #promo4 {
position: absolute;
top: 0;
height: 240px;
width: 627px;
background-repeat: no-repeat;
}
#teaser_1_1 #selector {
position: absolute;
left: 0;
top: 240px;
list-style-type: none;
margin: 0;
padding: 0;
width: 627px;
}
#teaser_1_1 #selector li {
float: left;
width: 156px;
}
#teaser_1_1 #selector li a {
background-image: url(img/main_nav.gif);
background-repeat: repeat-x;
outline: none;
display: block;
padding-left: 15px;
font-size: 12px;
font-weight: bold;
color: #FFF;
text-decoration: none;
line-height: 23px;
height: 24px; }
#teaser_1_1 #selector li a:hover,
#teaser_1_1 #selector li.active a {
background-image: url(img/on.jpg);
}
#contPrinc #contPrinc2 #left #teaser_1_1 #selector #select-promo-4 {
width: 157px;
}
#contPrinc #contPrinc2 #left #teaser_1_1 #selector #select-promo-3 {
width: 157px;
}
#contPrinc #contPrinc2 #left #teaser_1_1 #selector #select-promo-2 {
width: 157px;
}
#contPrinc #contPrinc2 #left #teaser_1_1 #selector #select-promo-1 {
width: 156px;
}
Muchas gracias
