javascript / jquery: la recherche de l'image script fading

Question

Je cherche un script léger (javascript pur préféré) - il devrait être pour la décoloration en douceur une séquence d'images dans l'autre (= carrousel d'images). il devrait également être possible d'exécuter plusieurs instances (il devrait donc être un prototype de script), comme par exemple: - bannière du site: la décoloration 3 images après l'autre - contenu principal: 3 galeries, chaque 3-5 images fading

recommandations script à utiliser à cette fin?

merci!

Answer 1

Je l'ai utilisé jQuery et plug-in coulisse croisée il fonctionne bien.

Answer 2

Salut j'ai écrit un script simple qui utilise des méthodes jQuery .fadeOut () et .fadeIn () ainsi que quelques lignes de html et css. Avec les ids pour les éléments d'image numérotés de 1 à n l'algorithme peut facilement parcourir les images et commencer à nouveau quand il arrive à la dernière image. Il pourrait être facilement adapté pour effectuer les transitions se font automatiquement après un certain délai de temps au lieu de tirer sur un bouton clic. Faites-moi savoir si cela aide. Voici le code:

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