DruckversionEffektvolle Diashow über Cycle
Vollständiges Beispiel: Quellcode
Damit sieht das vollständige Beispiel folgendermaßen aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Diashow mit Cycle</title>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<style type="text/css">
/* ein paar allgemeine Formatierungen */
* {
margin: 0;
padding: 0;
}
body {
font: 80% sans-serif;
background-color: #fff;
margin: 10px;
color: #000;
}
/* wichtige Formatierungen fuer Cycle */
#bilder {
width: 432px;
height: 294px;
margin: 20px 5px;
}
#bilder img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 400px;
height: 262px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"
src="jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(function(){
$('#bilder').cycle();
});
</script>
</head>
<body>
<div id="bilder">
<img src="bilder/bild1.jpg" alt="Boot">
<img src="bilder/bild2.jpg" alt="Leuchtturm">
<img src="bilder/bild3.jpg" alt="Regenbogen">
<img src="bilder/bild4.jpg" alt="Brücke">
<img src="bilder/bild5.jpg" alt="Steine">
<img src="bilder/bild6.jpg" alt="Allee">
<img src="bilder/bild7.jpg" alt="Wald">
</div>
</body>
</html>Sie können das Plugin mit diesen Einstellungen in unserem Beispiel
online testen.
Dies ist eine Leseprobe
Möchten Sie den Beitrag komplett lesen? Dann werden Sie Probemitglied und testen Sie akademie.de 14 Tage kostenlos!
Auf Bilder mit JavaScript: jQuery-Plugins erfahren Sie mehr über diesen Beitrag und die weiteren Leseproben.
Weitere Informationen finden Sie auf unserer Infoseite zur Mitgliedschaft und in unseren AGB.
Ich bin bereits Mitglied