Simple image rotator mit jQuery 1.3.2

Habe ich diese HTML:

<div class="rotator">
<img src="../images/photos/DSC02625.jpg"/>
<img src="../images/photos/IMG_4825.jpg"/>
<img src="../images/photos/IMG_4869.jpg"/>
</div>

Was die einfachste Möglichkeit zum erstellen einer einfachen Bild-rotator using jQuery 1.3.2?

Möchte ich nicht verwenden plugins...

Fade wäre nett zu haben.

Dank 🙂

  • Kopieren und fügen Sie den code von Cycle Lite plugin in Ihrem code =) jquery.malsup.com/cycle/lite
  • Was ist falsch mit den plugins?
  • Ich don ' T wollen, verwenden Sie plugins für jedes Effekt-ich will auf einer Seite. Und ich denke, wie es andere 🙂
InformationsquelleAutor Snowalker | 2012-01-03
  1. 5
    var $rotator = $(".rotator");
$rotator.find("img:gt(0)").hide();
setTimeout(Rotate, 1000);

function Rotate() {
    var $current = $rotator.find("img:visible");
    var $next = $current.next();
    if ($next.length == 0) $next = $rotator.find("img:eq(0)");
    $current.hide();
    $next.show();
    setTimeout(Rotate, 1000);
}

    Beispiel: http://jsfiddle.net/hunter/LMw6F/

    • Danke! Arbeiten wie ein Charme! 🙂
    InformationsquelleAutor hunter
  2. 2

    Habe ich ein paar updates... Überlappende fadeOut und fadeIn mit CSS absolute Positionierung...

    $(document).ready(function () {

    var $rotator = $(".rotator");
    $rotator.find("img:gt(0)").hide();
    setTimeout(Rotate, 3000);

    function Rotate() {
        var $current = $rotator.find("img:visible");
        var $next = $current.next();
        if ($next.length == 0) $next = $rotator.find("img:eq(0)");
        $current.fadeOut(1000);
        $next.fadeIn(1000);
        setTimeout(Rotate, 3000);
    }

});

    Beispiel: http://jsfiddle.net/LMw6F/439/

    InformationsquelleAutor MyWebsiteSpot
  3. 0

    Großen kleinen Stück code. Zwei Probleme, die ich hatte: ich musste den link der Bilder, und wickelte Sie in einem href-tag bricht der code. Zu beheben war wickeln Sie jedes Bild und link in einem div-tag und zeigen Sie die Funktion an. Die wollte ich auch verwenden, fadeIn/- Out für einen weicheren übergang:

    $current.fadeOut(1000);
$next.fadeIn(1000);

    Dies schien zu funktionieren, bis ich sah bei ihm in den Explorer.
    Ich verwendet die absolute Positionierung zu halten, die Bilder, die gestapelt auf der jeweils anderen, aber es stellt sich heraus--facepalm--na was wohl? KEINE version von Explorer unterstützt fading auf ein absolut positioniertes element. Verschiedene versuche, das zu tun, ohne absolute Positionierung aller beteiligten haben die Bilder hüpfen herum überraschend wie das neue Bild eingeblendet und das alte verblasst. Die Korrektur, die schließlich funktionierte, war die Verwendung der callback-Funktion für das auslösen der fadeIn nur, wenn der fadeOut abgeschlossen. Hier ist der fix kam ich mit:

    $(document).ready(function () {

    var $rotator = $(".rotator");
    $rotator.find("div:gt(0)").hide();
    setTimeout(Rotate, 6000);

    function Rotate() {
        var $current = $rotator.find("div:visible");
        var $next = $current.next();
        if ($next.length == 0) $next = $rotator.find("div:eq(0)");
        $current.fadeOut(1000, function() {
            $next.fadeIn(1000); 
        });
        setTimeout(Rotate, 6000);
    }

});
    InformationsquelleAutor DrBB
Schreibe einen Kommentar