Que tal, encontre una web de desarrollo donde habia un ejemplo que servia para mi sitio..
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> Ademas importo :
Código HTML:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
y el texto HTML:
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:
#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;
}
Los ID en los botones estan bien dirigidos, que esta fallando ?
Muchas gracias