Auto-Slideshow via jQuery

closeThis post was published more than three months ago. Please note that the information offered here may no longer be current and valid. Therefore, please inform yourself about this topic elsewhere. If there is any new information, you can also send me a comment. Thank you so much!

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);
      });
    });

  };

 

Published by

voku

Lars Moelleken | Ich bin root, ich darf das!