Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

Ajax / Javascript Tutorial: Schritt für Schritt zum eigenen jQuery-Slider - v.2



Ranking: +4   Kommentare: 3   |   Bewertung: Keine Berechtigung!  

Hallo,
im letzten Tutorial ging es ja bereits um das Thema "Wie erstelle ich meinen eigenen jQuery-Slider?".

Auch wenn es mehr oder weniger funktionstüchtig ist, haben sich doch einige Fehler eingeschlichen (seien sie nun rechtschreiblicher oder gar funktionaler Natur).

Diese Tutorial beinhaltet weitestgehen die gleichen Elemente wie in dem vorheigen Tutorial. Es wurden also lediglich Fehler behoben und gewünschte Features hinzugefügt.

Grundlegend hat sich folgendes geändert:

- Fehlerbehebung: Slider animiert nun erst, wenn vorangegangene Animation beendet (bei mehrmaligem Klick ist man vorher aus dem Viewport rausgeslidet)

- Featurewunsch: 2 Modi: AutoAnimate (Slide von links nach rechts und wieder zurück) oder per Buttons

Alle Änderungen zum alten Slider sind fett hervorgehoben!

Genug gerede, jetzt geht´s ans Eingemachte:

Zunächst wieder unser HTML-Grundgerüst. Hier hat sich nichts weiter geändert:

Code:




<div class="slideshow">







    <div class="control"><div class="left"></div><div class="right"></div></div>







    <div class="inner">







        <div class="slide">



                Content A



        </div>



        



        <div class="slide">



                Content B



        </div>



        



        <div class="slide">



                Content C



        </div>



        



    </div>



        



</div>




Auch beim Css hat sich nur unwesentlich etwas geändert (Im Falle nicht vorhandener Bilder sind die Buttons trotzdem sichtbar).

Code:




<style>

.slideshow{margin: 0 auto; width:800px; height:500px; overflow:hidden;} /* gibt Höhe und Breite des Sliders an, wichtig overflow:hidden */



.inner{height:500px; background:lightgray} /*Höhe muss gleich sein wie bei .slideshow, Breite wird später definiert */



.slide{width:800px; height:500; margin-left:0px; float:left;} /*float:left für horizontalen Slide */



.left{float:left; margin-left:-75px;width:45px; height:45px; background: url(img/left.png) #ccc;} /* linker Button */



.right{float:right;margin-right:-75px;width:45px; height:45px; background: url(img/right.png) #ccc; } /* rechter Button */



.right:hover, .left:hover { cursor:pointer; background: #111;}/* hover linker + rechter Button */



.control{width:800px; position:absolute; top:250px;} /* Kontrollfläche, durch top kann sie mittig ausgerichtet werden. */

</style>





Das übliche Einbinden der jQuery-Datei kennen wir ja auch bereits ;)

Code:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>




Und nun wird es spannend:
Als Erstes kommen ein paar Einstellungsmöglichkeiten:


Code:


   

$(document).ready(function(){ 



    /* SETTINGS */

    

    var mode = "click";   // Modus: auto = autoanimate  ||  click = mit Buttons links/rechts

   

    var timeout = 3; // Timeout (Zeit zwischen den Animationen in Sekunden)


    

    var currentPosition = 0; //legt die erste Position fest

    

    var slides = $(".slide");

    

    /* Settings Ende */




Weiter geht es mit ein Paar variablen, die die Animations-Funktionen benötigen:

Code:






if(mode == "auto"){                                                 // wenn Modus = auto

     var auto = true;                                               // setzte auto auf true

     $('.control').css("display","none");                           // verstecke Navigation

}else if(mode == "click"){                                          // wenn Modus = Click

     var auto = false;                                              // setze auto auf false

     $('.control').css("display","inline");                         // zeige Navigation

}

    

    var animationtime = timeout * 1000; 

    

    var isAnimated = false; // zum Überprüfen, ob gerade animiert wird, setzten wir "isAnimated" auf false




    var numberOfSlides = slides.length; //zählt die Anzahl der slide-Container, also Seiten/Bilder



    var slideWidth = slides.width(); //speichert die Breite eines slide-Containers in slideWidth



    var maxSlideWidth = (parseInt(slideWidth) * numberOfSlides) + parseInt(slideWidth); //legt die maximale Slidebreite fest



          

    $(".inner").css({"width":maxSlideWidth}); //gibt .inner die maximale Breite, die er sliden darf



       

    if(currentPosition <= 0) { //left fest, dass wenn aktuelle Position kleiner gleich 0 ist, der linke Kontrollbutton ausgeblendet ist und prüft ob derzeit bereits eine Animation im Gange ist. (!isAnimated ist gleichzusetzten mit isAnimated = true)



          $(".left").css("display","none"); 

          

          }





Um später die AutoAnimation starten zu können müssen wir nun die beiden Animationen (nach rechts & nach links) jeweils in eine Funktion stecken:

Code:




/* SLIDE LEFT */



function slideLeft(){    



                if ( currentPosition >=0 && currentPosition <= numberOfSlides && !isAnimated) {    // wenn aktuelle Position kleiner gleich der maximalen Position UND wenn nicht gerade animiert wird

                isAnimated=true;    // setzte isAnimated auf true, sodass weitere Animationen geblockt werden.     

              $(".inner").stop().animate(    {"margin-left":"+="+ slideWidth},    //animiere slider nach rechts

                                            "fast",                                //Geschwindigkeit (kann auch in ms angegeben werden (ohne Anführungszeichen) 2000 (2sek) oder 3000 (3sek) usw.

                                            function() { isAnimated = false }
    // setzt isAnimated wieder auf false, nachdem die Animation beendet wurde

                                        ); 

                

              currentPosition --; //bei klick wird die Position um 1 verringert

            

              if(currentPosition == 0) {                // wenn aktuelle Position ganz links...



                  $(".left").hide();                    // ...verstecke den linken Slidebutton

              } 

              if(currentPosition <= numberOfSlides) {     // wenn aktuelle Position kleiner gleich der maximalen Position...



                  $(".right").fadeIn(500);                 //    ...fade den rechten Slidebutton ein.

              }

              }

          }




Code:






/* SLIDE RIGHT */

        

function slideRight(){

    if ( currentPosition >= 0 && currentPosition <= numberOfSlides && !isAnimated) {    // wenn aktuelle Position kleiner gleich der maximalen Position UND wenn nicht gerade animiert wird

        isAnimated=true;    // setzte isAnimated auf true, sodass weitere Animationen geblockt werden.



        $(".inner").stop().animate(    {"margin-left":"-="+ slideWidth},    //animiere slider nach links

                                     "fast",                                //Geschwindigkeit (kann auch in ms angegeben werden (ohne Anführungszeichen) 2000 (2sek) oder 3000 (3sek) usw.

                                     function() { isAnimated = false }     // setzt isAnimated wieder auf false, nachdem die Animation beendet wurde

                                  ); 



        currentPosition ++;  //bei klick wird die Position um 1 erhöht



        if(currentPosition == numberOfSlides - 1) { // wenn aktuelle Position gleich der Anzahl an slide-Divs...



            $(".right").hide();                    // ...blende rechten Button aus

        }



        if(currentPosition == 1)     {                //    wenn aktuellen Position gleich 1 bzw höher als eins...



            $(".left").fadeIn(500);                // ...blende linken Button ein

        }



    }

}





Um diese beiden Funktionen über unsere beiten Buttons steuern zu können müssen wir diese den Buttons zuweisen:

Code:




          $(".left").live("click",function(){  //klick auf linken Kontrollbutton

            slideLeft();

        });

       

        $(".right").live("click",function(){ //klick auf rechten Kontrollbutton

            slideRight();

        });




Zu guter Letzte noch das neue Feature - dem AutoAnimation:

Code:




        /* AUTO-ANIMATE */

        

        if(auto == true){   // Wenn autoAnimate true

                var counter = 0;

                var turn = false;

                setInterval(function() {

                if(counter >= 0 && counter < numberOfSlides - 1){   // wenn Variable counter größer gleich 0 UND Variable counter kleiner als numberOfslides - 1

                slideRight();                                        // führe die Funktion slideRight() aus

                counter++;                                            // und erhöhe pro Intervall Variable counter um +1. Wir zählen also von 0 bis numberOfSlides!

                }

                if(counter == numberOfSlides - 1 ){                    // Wenn Variable counter gleich numberOfSlides - 1 (also nach rechts am Ende angekommen)

                turn = true;                                        // setzte Variable turn auf true, damit der Slide nach left ausgelöst wird

                counter = numberOfSlides * (-1);                        // und setzte Variable numberOfSlides auf negativ (

                }

                if(turn == true){                                    // wenn turn gleich true

                slideLeft();                                        // führe slideLeft() aus

                counter++;                                            // und erhöhe Variable counter um +1. Wir zählen also von -numberOfSlides bis 0!

                }

                if(counter == 0){                                    // wenn Variable counter wieder auf 0

                turn = false;                                        // setzte turn wieder auf false

                counter = 0;                                        // und zur Sicherheit counter nochmals auf 0;

                }        

                }, animationtime);                                    //Animationszeit in Sek (oben in den Settings einstellbar)

                

        }

                    

    });



Sicher, es ist nicht immer die sauberste und eleganteste Methode, aber wie heißt es doch so schön: "Viele Wege führen nach Rom".
:)

Das war´s auch schon wieder.
Sollten Fragen und Probleme auftauchen einfach PM oder in die Kommentare posten.


Gruß,
fpvz


Veröffentlicht von: vanDerb
Veröffentlicht am: 9 May. 2011
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: autoslide javascript jQuery slide


Themenverwandte Tutorials


Kommentar(e) (3)


laudan sagt:

Hey, leider hat sich das Problem des Doppelklicks bei mir nicht gelöst... :/

29 Aug. 2012 14:59:59 • Antworten


Hessing Pictures sagt:

Hallo fpvz,
dein Tutorial ist einfach super. Ich frage mich nur ob es möglich ist die einzelnen Cotent-Seiten direkt mit einer externen navigation anzusteuern. Da ich keine Ahnung von javascript habe würde mich interessieren wie man so etwas realisiert.

Mfg Björn

31 Jan. 2012 22:12:48 • Antworten


vanDerb sagt:

PS: Sry wegen der Einrückung des Codes. Ist im Browsertextfeld nicht ganz einfach zu händeln :)

10 May. 2011 09:14:57 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder