Javascript / jquery: Suche Bild-Fading-Skript

Question

ich suche nach einem leichten Skript (reine Javascript bevorzugt) - es glatt Verblassen eine Folge von Bildern ineinander (= Bild-Karussell) sein sollte. es sollte auch möglich sein, mehrere Instanzen zu laufen (so ist es ein Prototyp Skript sein soll), wie zum Beispiel: - Website Banner: Verblassen 3 Bilder hintereinander - Hauptinhalt: 3 Galerien, die jeweils Verblassen 3-5 Bilder

alle Empfehlungen Skript, das zu diesem Zweck zu benutzen?

Danke!

Answer 1

Ich habe die jQuery Plugin und Planschieber es funktioniert gut.

Answer 2

Hallo, ich habe ein einfaches Skript geschrieben, die Verwendung des jQuery .fadeOut () und .fadeIn () -Methoden zusammen mit ein paar Zeilen HTML und CSS macht. Mit den IDs für die Bildelemente nummeriert von 1 bis n kann der Algorithmus Iterierte einfach durch die Bilder und wieder von vorn anfangen, wenn es um das letzte Bild bekommt. Es könnte leicht die Übergänge automatisch nach einer gewissen Zeitverzögerung auftreten machen angepasst stattdessen auf eine Schaltfläche klicken abzufeuern. Lassen Sie mich wissen, ob das hilft. Hier ist der 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" />