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>
[/php]
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>
[/php]
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!
Schreibe einen Kommentar