Foros del Web - Ver Mensaje Individual

Dany_s · #2 (**permalink**) 19/05/2011, 08:56

te cree una guia/explicación

basicamente es hacer un loop y trabajar con un div para ocultarlo, mover al siguiente y mostrarlo, dejando una bandera que en este caso seria el de la clase .visible por eso el addClass y removeClass

Código Javascript:

Ver original<html>
    <head>
        <title>Ejemplo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
 
        <script>
 
    $(function() {
        //Opacidad 0 a los div que no tenga clase .visible
        $('#slider .seccion.visible').siblings('.seccion').animate({opacity: 0}, 0);
 
        //Ejecuto funcion slider
        slider();
 
        function slider(){
            //Selecciono el div con clase .visible
            $('#slider .seccion.visible')
            //Para que permanezca visible la seccion hago un delay con la cantidad de segundos que se quiera mantener
            .delay(3000)
            //Luego del delay realizo la animación que es darle una opacidad a 0
            .animate({opacity: 0}, 500, function(){
                //Cuando termina la animación le borro la clase visible
                $(this).removeClass('visible');
                //Selecciono el div que se encuentra a continuación del div con el que se está trabajando
                siguiente = $(this).next();
                //Si no encuentra un div es porque se está trabajando soble el último div, entonces selecciono el primero
                if (!siguiente.length)
                    siguiente = $('#slider .seccion:eq(0)');
                //Le agrego la clase visible y le doy opacidad para que se muestre
                siguiente.addClass('visible').animate({opacity: 1}, 500);
                //Vuelvo a ejecutar la función slider();
                slider();
            });
        }
 
    });
 
 
        </script>
 
    <style>
        #slider { background:#000; position:relative }
        #slider, .seccion{ height:100px;}
        .seccion{ position:absolute; width:100&#37;}
        .uno { background:red }
        .dos { background:blue }
        .tres { background:green }
        .cuatro{ background:yellow}
        h1{margin:0}
    </style>
 
</head>
<body>
 
 
    <div id="slider">
        <div class="seccion uno visible">
            <h1>Secci&#243;n Uno</h1>
        </div>
        <div class="seccion dos">
            <h1>Secci&#243;n Dos</h1>
        </div>
        <div class="seccion tres">
            <h1>Secci&#243;n Tres</h1>
        </div>
        <div class="seccion cuatro">
            <h1>Secci&#243;n Cuatro</h1>
        </div>
    </div>
 
</body>
</html>

Pero puedes buscar algún plugin si no lo puedes adaptar a tus necesidades