//Background slider para la home jQuery.fn.backgroundSlider = function () { this.each(function () { elem = jQuery(this); function repetir() { $active = elem.find("img.active"); if ($active.length === 0) $active = jQuery('.background-slider img'); // Las imágenes se muestran en el mismo orden en que están colocadas en la web var $next = $active.next().length ? $active.next() : elem.find('img:first'); // Quitar el comentario para que pasen de forma aleatoria // 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'); }); setTimeout(repetir, 5000); } repetir(); }); }; jQuery(document).ready(function ($) { $('.backgroundSlider').backgroundSlider(); });
<div class="contenido"> <div class="backgroundSlider"> <img src="http://www.visualxtudio.com/wp-content/uploads/2011/10/css_logo-180x160.gif" alt="" /> <img src="http://www.visualxtudio.com/wp-content/uploads/2011/10/Dekar-180x160.jpg" alt="" /> <img src="http://www.visualxtudio.com/wp-content/uploads/2011/10/font-180x160.jpg" alt="" /> </div> </div>
.contenido{ width:400px; margin:0 auto; } .backgroundSlider { position:relative; width:100%; height:400px; overflow:hidden; } .backgroundSlider IMG { position:absolute; top:0; left:0; z-index:8; opacity:0.0; } .backgroundSlider IMG.active { z-index:10; opacity:1.0; } .backgroundSlider IMG.last-active { z-index:9; } .backgroundSlider img { width: 100%; height: auto; }