estoy desarrollando un script con jquery pero he quedado entrampado
dejo el ejemplo para que me entiendan y el codigo que tengo.
WEB: http://www.mediasur.cl/3/
CODIGO:
Código HTML:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> <script language="javascript"> $(document).ready(function() { $('.mod11').fadeIn(2000); setTimeout("$('.mod21').fadeIn(2000);",5000); setTimeout("$('.mod31').fadeIn(2000);",10000); setTimeout("$('.mod11').fadeOut(2000);",15000); setTimeout("$('.mod12').fadeIn(2000);",15000); setTimeout("$('.mod21').fadeOut(2000);",20000); setTimeout("$('.mod22').fadeIn(2000);",20000); setTimeout("$('.mod31').fadeOut(2000);",25000); setTimeout("$('.mod32').fadeIn(2000);",25000); setTimeout("$('.mod12').fadeOut(2000);",30000); setTimeout("$('.mod13').fadeIn(2000);",30000); setTimeout("$('.mod22').fadeOut(2000);",35000); setTimeout("$('.mod23').fadeIn(2000);",35000); setTimeout("$('.mod32').fadeOut(2000);",40000); setTimeout("$('.mod33').fadeIn(2000);",40000); setTimeout("$('.mod13').fadeOut(2000);",45000); setTimeout("$('.mod23').fadeOut(2000);",45000); setTimeout("$('.mod33').fadeOut(2000);",45000); }); </script> <style type="text/css"> .slideshow{float:left; margin-right:4px; width:96px; height:69px; margin-bottom:4px;position: relative; } .slideshow IMG{position:absolute;z-index:8;opacity:0.0; border:1px solid #EFEFEF;} .slideshow IMG.active{z-index:10;opacity:1.0;} .slideshow IMG.last-active{z-index:9;} </style> <div style="width:300px;"> <div class="slideshow" > <img src="logos/1/1unido.jpg" alt="" style="display:none" class="active mod21" /> <img src="logos/2/1icontec.jpg" alt="" style="display:none" class="active mod22" /> <img src="logos/3/1avina.jpg" alt="" style="display:none" class="active mod23" /> </div> <div class="slideshow" > <img src="logos/1/2usaid.jpg" alt="" style="display:none" class="active mod11" /> <img src="logos/2/2oea.jpg" alt="" style="display:none" class="active mod12" /> <img src="logos/3/2bmundial.jpg" alt="" style="display:none" class="active mod13" /> </div> <div class="slideshow" > <img src="logos/1/3bid.jpg" alt="" style="display:none" class="active mod11" /> <img src="logos/2/3preciouswoods.jpg" alt="" style="display:none" class="active mod12" /> <img src="logos/3/3explora.jpg" alt="" style="display:none" class="active mod13" /> </div> <div class="slideshow" > <img src="logos/1/4syngenta.jpg" alt="" style="display:none" class="active mod31" /> <img src="logos/2/4ch.jpg" alt="" style="display:none" class="active mod32" /> <img src="logos/3/4bicevida.jpg" alt="" style="display:none" class="active mod33" /> </div> <div class="slideshow" > <img src="logos/1/5sercotec.jpg" alt="" style="display:none" class="active mod21" /> <img src="logos/2/5pacific.jpg" alt="" style="display:none" class="active mod22" /> <img src="logos/3/5dwih.jpg" alt="" style="display:none" class="active mod23" /> </div> <div class="slideshow" > <img src="logos/1/6fundacion.jpg" alt="" style="display:none" class="active active mod11" /> <img src="logos/2/6swisscontact.jpg" alt="" style="display:none" class="active mod12" /> <img src="logos/3/6fundes.jpg" alt="" style="display:none" class="active mod13" /> </div> <div class="slideshow" > <img src="logos/1/7iica.jpg" alt="" style="display:none" class="active mod31" /> <img src="logos/2/7ecos.jpg" alt="" style="display:none" class="active mod32" /> <img src="logos/3/7freistaat-bayern.jpg" alt="" style="display:none" class="active mod33" /> </div> <div class="slideshow" > <img src="logos/1/8gruponueva.jpg" alt="" style="display:none" class="active mod31" /> <img src="logos/2/8cinset.jpg" alt="" style="display:none" class="active mod32" /> <img src="logos/3/8el-inmobiliario.jpg" alt="" style="display:none" class="active mod33" /> </div> <div class="slideshow" > <img src="logos/1/9amanco.jpg" alt="" style="display:none" class="active mod21" /> <img src="logos/2/9carana.jpg" alt="" style="display:none" class="active mod22" /> <img src="logos/3/9ccs.jpg" alt="" style="display:none" class="active mod23" /> </div> </div>
lo intente con de la siguiente forma, pero no me funciona
Código HTML:
<script language="javascript"> function slideStocker() { $('.mod11').fadeIn(2000); setTimeout("$('.mod21').fadeIn(2000);",5000); setTimeout("$('.mod31').fadeIn(2000);",10000); setTimeout("$('.mod11').fadeOut(2000);",15000); setTimeout("$('.mod12').fadeIn(2000);",15000); setTimeout("$('.mod21').fadeOut(2000);",20000); setTimeout("$('.mod22').fadeIn(2000);",20000); setTimeout("$('.mod31').fadeOut(2000);",25000); setTimeout("$('.mod32').fadeIn(2000);",25000); setTimeout("$('.mod12').fadeOut(2000);",30000); setTimeout("$('.mod13').fadeIn(2000);",30000); setTimeout("$('.mod22').fadeOut(2000);",35000); setTimeout("$('.mod23').fadeIn(2000);",35000); setTimeout("$('.mod32').fadeOut(2000);",40000); setTimeout("$('.mod33').fadeIn(2000);",40000); setTimeout("$('.mod13').fadeOut(2000);",45000); setTimeout("$('.mod23').fadeOut(2000);",45000); setTimeout("$('.mod33').fadeOut(2000);",45000); } $(function() { setInterval( "slideStocker()", 47000 ); }); </script>
saludos