Código CSS :
.foto {width: 990px; height:310px; margin-top:10px; margin-left:10px; background:#FFF;} .foto IMG { position:absolute; top:180x; left:73px; z-index:8; opacity:0.0; } .foto IMG.active { z-index:10; opacity:1.0; } .foto IMG.last-active { z-index:9; }
Código Javascript :
<script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('.foto IMG.active'); if ( $active.length == 0 ) $active = $('.foto IMG:last'); // use this to pull the images in the order they appear in the markup var $next = $active.next().length ? $active.next() : $('.foto IMG:first'); // uncomment the 3 lines below to pull the images in random order // var $sibs = $active.siblings(); // var rndNum = Math.floor(Math.random() * $sibs.length ); // var $next = $( $sibs[ rndNum ] ); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 10000 ); }); </script>
Código HTML :
<div class="foto"><img src="image1.jpg" width="990" height="300" class="active"/> <img src="image2.jpg" width="990" height="300" /></div>