Auto-Slideshow via jQuery

Heute stelle ich eine kleine JavaScript-Funktion vor. Das Script ist jedoch nicht für den produktiveren Einsatz bereit, da die 3D-CSS-Transformation via “transform-style: preserve-3d;” zwar schick aussieht, jedoch noch keine Unterstützung bei allen Browser hat (wie immer ist der IE die Ausnahme).

Demo

Das ursprüngliche Script “TILTED CONTENT SLIDESHOW” (Lizenz: MIT | von “Mary Lou“) habe ich hier her. Daraufhin habe ich folgendes ergänzt und das CSS via SASS / Autoprefixer überarbeitet. An dieser Stelle gehe ich jedoch nicht weiter auf das CSS (+ Toolchain) ein, sondern zeige / erkläre die erstellte JavaScript-Funktionalität.

  //
  // Im Gegensatz zu anderen Programmiersprachen besitzt JavaScript keine richtigen Klassen, 
  // dafür Objekt-Prototypen und jede Funktion kann als Objekt genutzt werden. 
  //
  // Links:
  // OOP mit JavaScript - Objektliterale: http://www.peterkropff.de/site/javascript/objektliterale.htm
  // Wiedereinführung in JavaScript: https://developer.mozilla.org/de/docs/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript
  // 
  TiltSlider.prototype._autoSlider = function () {

    //
    // Variablen sind in JavaScript meistens global verfügbar, 
    // außer man schreibt "var" vor die Variabel (in einer Funktion) 
    //
    // Links:
    // Variablen-Test: http://jsfiddle.net/voku/mZnh6/1/    
    // JavaScript - Grundlagen - Variablen: http://www.peterkropff.de/site/javascript/variablen.htm
    //
    var wait = 2000;
    var counter = 0;
    //
    // jQuery - Selektoren fungieren meistens wie CSS-Selektoren
    //
    // Links:
    // Crashkurs: jQuery-Selektoren: http://suckup.de/howto/jquery/crashkurs-jquery-selektoren/
    //
    var slideshowNavSpanSelector = $("#slideshow nav span");
    // 
    // Größe vom Array 
    //
    // Links:
    // JS-Array: http://www.w3schools.com/jsref/jsref_obj_array.asp
    //
    var slideshowNavSpanSelectorLength = slideshowNavSpanSelector.length;

    // 
    // Funktion mit Übergabeparameter
    //
    function sliderCheck(counter_tmp) {
      if ($(".navcount" + counter_tmp).hasClass('current')) {
        return true;
      } else {
        return false;
      }
    }
    
    // 
    // Funktion welche die globale "counter"-Variable nutzt
    //
    function autoSlider() {
      if (sliderCheck(counter) === false) {
        $('.navcount' + counter).click();
      }

      if (counter === slideshowNavSpanSelectorLength) {
        counter = 0;
      } else {
        counter++;
      }
    }

    // 
    // Intervall für die "autoSlider"-Funktion
    //
    // Link:
    // http://www.w3schools.com/jsref/met_win_setinterval.asp
    // 
    var timer = setInterval(autoSlider, wait);

    // 
    // Für alle zuvor selektieren "span"-Elemente, wird hier das "MouseEnter"- & "MouseLeave"-Event 
    // von jQuery registriert. Das Event wird im Gegensatz zu "MouseOver" nur ausgelöst, 
    // wenn man in das Element hinein bzw. hinausgeht.
    //
    // Link:
    // https://api.jquery.com/mouseenter/
    //
    slideshowNavSpanSelector.each(function(index) {
      $(this).mouseenter(function() {
        // 
        // Stoppt das zur definierte Intervall
        //
        // Link:
        // http://www.w3schools.com/jsref/met_win_clearinterval.asp
        // 
        clearInterval(timer);

        if (sliderCheck(index) === false) {
          $('.navcount' + index).click();
        }

      }).mouseleave(function () {

        // set counter
        counter = index;

        // ... Intervall wieder starten ...
        timer = setInterval(autoSlider, wait);
      });
    });

  };

Ähnliche Beiträge:

Toolchain für Webentwickler