Javascript / jQuery: en busca de la escritura-decoloración de la imagen

Question

Estoy buscando un script ligero (javascript puro prefiere) - que debería ser para la decoloración sin problemas una secuencia de imágenes entre sí (= imagen carrusel). También debe ser posible ejecutar varias instancias (lo que debe ser un guión prototipo), como por ejemplo: - Banner de sitio: la decoloración 3 imágenes una tras otra - contenido principal: 3 galerías, cada una decoloración 3-5 imágenes

las recomendaciones que la escritura a utilizar para ese propósito?

Gracias!

Answer 1

He utilizado el jQuery CrossSlide complemento y funciona bien.

Answer 2

Hola He escrito un script sencillo que hace uso de la jQuery .fadeOut () y .fadeIn () métodos junto con unas pocas líneas de HTML y CSS. Con las identificaciones de los elementos de imagen numerados del 1 al n el algoritmo puede fácilmente iterar a través de las imágenes y empezar de nuevo cuando se llega a la última imagen. Podría ser fácilmente adaptado para hacer las transiciones se producen automáticamente después de un cierto tiempo de retardo en lugar de disparar en un clic de botón. Déjeme saber si esto ayuda. Aquí está el código:

<style type="text/css">
        #images{ overflow:auto; }
        .current{ display:inline; }
        .hidden{ display:none; }            
</style>

<script type="text/javascript" >

    function doFade(current){

        var speed = 500;
        next = $("#"+(parseInt(current.attr("id")) + 1));
        if(next.length <= 0) next = $("#1");
        current.fadeOut(speed, 
            function fadeNextIn(){
                current.attr("class", "hidden");
                next.fadeIn(speed, 
                    function afterFadeNextIn(){
                        next.attr("class","current");
                    }
                );
            }
        );
    }

    $(document).ready(
        function () {
            $("#btnNext").click( 
                function(){ 
                    doFade($("#images .current"));
                }
            );
        }
    );

</script>

<div id="images">

    <img id="1" title="image 1" alt="image 1" src="1.jpg" class="current" />
    <img id="2" title="image 2" alt="image 2" src="2.jpg" class="hidden" />
    <img id="3" title="image 3" alt="image 3" src="3.jpg" class="hidden"/>
    <img id="4" title="image 4" alt="image 4" src="4.jpg" class="hidden"/>

</div>

<input id="btnNext" type="button" value="next" />