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 Schrit zum eigenen jQuery Slider



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

Es gibt dutzende Slider-Plugins für jQuery, einige sehr einfach, andere sehr kompakt. Bei vielen ist der Quellcode jedoch entweder ziemlich unaufgeräumt oder vollgepackt mit massig Codezeilen, oder sogar beides. Zudem weiß man bei den Bezeichnungen nicht immer, was sie genau bewirken.

Kurzum, wäre es doch klasse, wenn man von Grund auf seinen eigenen Slider erstellt, den man dann individuell erweitern kann, ohne sich erst durch "fremde" Codezeilen durchwurschteln zu müssen.

Hinweis: Es werden nur die Grundfunktionen eines Sliders erklärt, es wird sozusagen am Ende eine Art Light-Slider herauskommen. Dieser wird horizontal bedient und geslided. Zu einem späteren Zeitpunkt werde ich die "Modifikation" erklären, die den Slider auf vertikale Richtung trimmt!

Ich setze hier einfach mal Grundkenntnisse in jQuery, sowie HTML&CSS voraus.
Als guter Wegbegleiter in Sachen jQuery kann ich euch noch die jQAPI-Dokumentation (http://jqapi.com) ans Herz legen.

Überlegen wir nun zuerst, was wir benötigen:
- HTML-Grundgerüst
- CSS
- jQuery
- Codezeilen für unseren Slider
- Bilder Kontrollbuttons (links/rechts)

Es bietet sich an, zuerst das HTML-Grundgerüst samt CSS zu erstellen, da wir diese später für unseren Slidercode benötigen.

Für das Grundgerüst benötigen wir folgende Div-Container (benamung ist variabel, muss allerdings später auch im Code beachtet werden!):

- Slideshow (dient zur Ausrichtung und als äußerer Rahmen)
- Control (Kontrollbuttons - Links - Rechts -)
- Inner (Innerer Rahmen, dieser dient zur Animierung des Contents)
- Slide (pro Seite/Bild wird ein slide-Div erstellt)
Das Grundgerüst sieht also wie folgt aus:

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>




Das hätten wir geschaft. Widmen wir uns nun der CSS-Auszeichnung.

Code:




.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");} //Hintergrundbild linker Button

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

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




Damit ist unser Grundgerüst samt CSS fertig, und wir können zum Erstellen des Slidercodes übergehen.
Dazu gehen wir in den <head>-Bereich und stellen zuerst eine Verbindung zur jQuery-Datei her:

Code:


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



Im <head>-Bereich kommt nun auch unser Slidercode:

Code:






<script type="text/javascript">

    

   $(document).ready(function(){ 

        

    var slides = $(".slide");

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

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

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

          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

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

          

          

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

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

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

              if(currentPosition == 0)

                  $(this).fadeOut(500);

              if(currentPosition <= numberOfSlides) //wenn aktuelle Position kleiner gleich 

                  $(".right").fadeIn(500);

          });



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

              

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

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

              if(currentPosition == numberOfSlides - 1) //wenn aktuelle Position gleich der Anzahl an slide-Divs, blende rechten Button aus

                  $(".right").fadeOut(500);

                  

              if(currentPosition == 1) //wenn aktuellen Position gleich 1 bzw höher als eins, blende linken Button ein

                  $(".left").fadeIn(500);

            

          });

          



      

   });



</script>






Und fertig. Die individuelle Gestaltunt bleibt jedem natürlich selbst überlassen, bei den Größenangaben ein wenig aufpassen, dass z.b. .inner und .slide nicht größer als .slideshow werden.
Bei Fragen und Verbesserungsvorschlägen einfach hier als Comment oder als PM an mich.
In Kürze werde ich wie gesagt noch eine kleine Modifikation schreiben, die das ganze auch vertikal sliden lässt.

so long!
fpvz

Veröffentlicht von: vanDerb
Veröffentlicht am: 14 Oct. 2010
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: javascript jQuery Slider


Themenverwandte Tutorials


Kommentar(e) (4)


Emkay75 sagt:

@fpvz...hat super funktioniert...danke!

Kann man die Contentbereiche auch über ein Menue A B C direkt aufrufen?

Gruss Emkay

1 Jun. 2012 14:45:11 • Antworten


vanDerb sagt:

Zitat ciso:

Kann man das ganze auch noch -neben den Click Events- automatisieren, À la setTimeOut(); wie in Javascript?



gute Idee, werde ich berücksichtigen. Kann nur leider derzeit nicht editieren, da die Bearbeitenfunktion anscheinend ausgeschaltet ist.

8 May. 2011 00:15:36 • Antworten


ciso sagt:

Kann man das ganze auch noch -neben den Click Events- automatisieren, À la setTimeOut(); wie in Javascript?

8 May. 2011 00:12:07 • Antworten


vanDerb sagt:

Mittlerweile ist etwas Zeit vergangen und es sind noch diverse Fehler ( sowohl im Text, als auch im Code selbst) enthalten. Sobald ich die Freigabe zum Editieren habe, werde ich diese ausbessern damit alles dann auch wirklich eine Runde Sache wird.

3 May. 2011 18:58:35 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


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