Eine einfache Lösung, um animierte Banner auf deiner Webseite zu integrieren, ist das jQuery-Plugin »InnerFade«. Mit dem hilfreichen Plugin kannst du Bilder mit Überblendung oder Sliding animieren. Die Geschwindigkeit der Animation ist ebenfalls ganz einfach anzupassen.
Ein animierter Banner ist mit jQuery ganz leicht zu erstellen.
Uns so einfach geht’s
Um deinen Banner zu animieren, erstellst du als erstes beliebig viele Sliderbilder. Dann suchst du dir auf der Webseite des Plugins die passende Animationsvariante aus. Für meinen Banner habe ich »A list with images and links« verwendet. Lade dir die Quelldatei des Plugins herunter, und öffne die index.html Datei.
Für einen animierten Bilderbanner kopierst du dir folgenden Codeschnipsel aus der Datei:
<h3>A list with images and links</h3> <ul> <li><a href="#"><img src="images/1.jpg" alt="image" /></a></li> <li><a href="#"><img src="images/2.jpg" alt="image" /></a></li> </ul>
Setzte jetzt deine eigenen Bilder und Links in die unorderd List (ul) ein.
Jetzt solltest du noch die jQuery-Library, die Javascript-Datei jquery.innerfade.js und die InnerFade-Funktion aufrufen. Kopiere dazu folgenden Codeschnipsel in den Headbereich deiner Datei:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript"> $(document).ready( function(){ $('ul').innerfade({ speed: 1000, timeout: 5000, type: 'sequence', containerheight: '125px' }); });
</script>
Das war’s auch schon. Dein animierter Banner ist fertig! Du kannst in jetzt noch mit CSS stylen, und dann in den verschiedenen Browsern testen.
Wenn du genauer erfahren möchtest, wie ein solcher Slider mit Javascript programmiert wird, ist das Video-Screencast: »How to build a Simple Content Slider jQuery Plugin« von Nettuts wirklich sehr hilfreich.
Kennst du weitere praktische Javascript-Plugins, die du unbedingt empfehlen möchtest? Dann schreibe mir doch einen Kommentar, ich freue mich auf deine Tipps!
Hihi, ich wollte euch schon fragen, welches Plugin ihr für den animierten Banner verwendet habt :) Letzte Woche bin ich bei der Suche nach so einem Plugin fast verzweifelt. Das jQuery-Plugin werde ich mir gleich bookmarken.
Super Tipp, das Plugin kannte ich auch noch nicht! Danke! :)
Liebe Ellen, nochmals vielen Dank für diesen super Plugin-Tipp. Gerade eben hat die neue Website meiner Mutter eine solche Slideshow gekriegt :) Was mir beim genaueren Anschauen deiner Anleitung aufgefallen ist: Kann es sein, dass du aus Versehen die falschen Codestücke oben reinkopiert hast? Oder sehe ich nur in meinem Browser so kryptische Zeichen? Wie auch immer, mit dem Kopieren der entsprechenden Codestücke aus der index.html hab ichs ohne Probleme hingekriegt :) Juhuu, jQuery macht Spass!
@Barbara: Oh ja, du hattest recht. Vielen Dank für den Hinweis. Da hatte es doch tatsächlich etwas mit dem Plugin verhakt! Komisch!!! Ich habe es aber wieder in Ordnung bringen können, und der Code sollte so wieder stimmen.
Da bin ich aber schon sehr gespannt auf die neue Webseite deiner Mama Hört sich toll an :-)
Viele Grüße
Ellen
Jep, jetzt sehen die Codes wieder schön aus :) Danke für deine Mühe!
Hast du auch ein richtiges Beispiel, an dem man es gleich sieht?
Würde mir gern die Zeit sparen, falls es doch nicht das gewünschte ist was ich suche.
Gruß
Kevin