Einfache und überzeugende JavaScript-Bildeffekte mit jQuery-Plugins

Effektvolle 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&uuml;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 BeispielAnzeigen online testen.

Mitglied werden, Vorteile nutzen!

  • Sie können alles lesen und herunterladen: Beiträge, PDF-Dateien und Zusatzdateien (Checklisten, Vorlagen, Musterbriefe, Excel-Rechner u.v.a.m.)
  • Unsere Autoren beantworten Ihre Fragen

Inhalt

Über die Autorin:

bild117864

Dr. Florence Maurice bietet Dienstleistungen im Webpublishing in Form von Fachtexten und Trainings (auch maßgeschneiderte Inhouse-Schulungen). Außerdem programmiert sie Webseiten. Ihre Themen: HTML, ...

Newsletter abonnieren