javascript / jquery: alla ricerca di script di image-sbiadimento

Question

Sto cercando uno script leggero (puro javascript preferito) - che dovrebbe essere per intoppi dissolvenza una sequenza di immagini in a vicenda (= immagine carosello). dovrebbe anche essere possibile eseguire diverse istanze (e quindi dovrebbe essere uno script prototipo), Come per esempio: - bandiera sito: dissolvenza 3 immagini una dopo l'altra - contenuto principale: 3 gallerie, ognuna dissolvenza 3-5 immagini

tutte le raccomandazioni che script per utilizzare a tale scopo?

grazie!

Answer 1

Ho usato il jQuery CrossSlide plug e funziona bene.

Answer 2

Ciao ho scritto un semplice script che fa uso di jQuery .fadeOut () e .fadeIn () metodi insieme con poche righe di HTML e CSS. Con gli ID per gli elementi di immagine numerate da 1 a n l'algoritmo può facilmente scorrere l'immagini e ricominciare quando si arriva all'ultima immagine. Potrebbe essere facilmente adattato per rendere le transizioni avvengono automaticamente dopo un certo ritardo di tempo invece di sparare su un pulsante. Fatemi sapere se questo aiuta. Ecco il codice:

<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" />