JQuery Kochbuch (German Edition)

"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">















    Rotator – jQuery-Code
// Initialisieren
function init_rotator() {

// Ist das Element vorhanden?
if (!$('#rotator').length) {

    // Wenn nicht, beenden
    return;
}

// Rotations-Geschwindigkeit
var speed = 2000;

// Pause-Status
var pause = false;

// Rotator-Funktion
function rotate(element) {

    // Stoppen, wenn der Anwender das wünscht
    if (pause) {
     return;
    }

    // Nächstes oder erstes

    var $next_li = $(element).next('li').length ?
     $(element).next('li') :
     $('#rotator li:first');

    // Nächster oder erster Steuer-Link
    var $next_a = $('#rotator_controls a.current').parent('li').next('li').length ?
     $('#rotator_controls a.current').parent('li').next('li').find('a') :
     $('#rotator_controls a:first');

    // Animieren
    $('#rotator_controls a.current').removeClass('current');
    $next_a.addClass('current');

    // Fortsetzen
    function doIt() {
     rotate($next_li);
    }

    //

ausblenden
    $(element).fadeOut(speed);

    // Nächstes

anzeigen
    $($next_li).fadeIn(speed, function() {

     // kurze Verzögerung
     setTimeout(doIt, speed);
    });
}

// Click-Listener für Steuerelemente
$('#rotator_controls a').click(function() {

    // Button-Text ändern
    $('#rotator_play_pause').html('PLAY');

    // Ziel anzeigen, andere

verbergen
    $($(this).attr('href')).show().siblings('li').hide();

    // class="current" hinzufügen und bei allen anderen entfernen
    $(this).addClass('current').parent('li').siblings('li')
     .find('a').removeClass('current');;

    // Animation pausieren
    pause = true;

    // Nicht folgen
    this.blur();
    return false;
});

// Pause / Play für Animation
$('#rotator_play_pause').click(function() {

    // Was steht auf dem Button?
    if ($(this).html() === 'PAUSE') {

     // Rotation anhalten
     pause = true;

     // Text ändern
     $(this).html('PLAY');

    } else {

     // class="pause" entfernen
     pause = false;

     // Rotation fortfahren
     rotate('#rotator li:visible:first');

     // Text ändern
     $(this).html('PAUSE');
    }

    // Nicht folgen
    this.blur();
    return false;
});

// Alles bis auf erstes

verbergen
$('#rotator li:first').siblings('li').hide();

// Auf Laden der Seite warten
$(window).load(function() {

    // Rotation beginnen
    rotate($('#rotator li:visible:first'));
});
}

// Los geht's
$(document).ready(function() {
init_rotator();
});
    Diskussion
    Dieses Rezept definiert zunächst zwei wichtige Variablen:
speed
(ein numerischer Wert in Millisekunden) und
pause
(ein Boolescher Wert, der festlegt, ob die Rotation laufen soll oder nicht). Die Geschwindigkeit wird hier in
speed
auf zwei Sekunden gesetzt und
pause
auf
false
, wodurch der Rotator beim Laden der Seite automatisch losläuft.
    Innerhalb der Funktion
rotate()
gibt es eine Variable
$next_li
, die auf das nächste

nach dem aktuell animierten Eintrag zeigt. Ist dieser der letzte im Array, wird auf das erste

im Array verwiesen. Genauso wird bei den Links