Auf einer HTML-Seite können dabei prinzipiell beliebig viele Bilder-Container integriert werden. Mit den Codeschnipseln dieses Beitrags bis zu 2 Bild-Container.
Wichtig ist eigentlich nur, dass die Bild-Container die ID´s erhalten, die auch im zugehörigen Stylesheet und im Javascript verwendet werden (hier: "imageContainer-x").
Nicht vergessen die jQuery Lib einzubinden!
Hier sind die jeweiligen HTML, CSS und Javascript Teile:
HTML
<!-- erster Container mit 4 Wechselbildern -->
<div id="imageContainer-1">
<img src="images/bild1.jpg" alt="Image" class="toplevel" />
<img src="images/bild2.jpg" alt="Image" />
<img src="images/bild3.jpg" alt="Image" />
<img src="images/bild4.jpg" alt="Image" />
</div>
<!-- zweiter Container mit 3 Wechselbildern -->
<div id="imageContainer-2">
<img src="images/bild5.jpg" alt="Image" class="toplevel" />
<img src="images/bild6.jpg" alt="Image" />
<img src="images/bild7.jpg" alt="Image" />
</div>
CSS
/**************************************************************/
/* Image Container */
/**************************************************************/
#imageContainer-1, #imageContainer-2 {
float: left;
}
#imageContainer-1 IMG, #imageContainer-2 IMG {
position:absolute;
z-index:1;
}
#imageContainer-1 IMG.toplevel, #imageContainer-2 IMG.toplevel {
z-index:3;
}
#imageContainer-1 IMG.middlelevel, #imageContainer-2 IMG.middlelevel {
z-index:2;
}
Javascript
<head>
...
<script type="text/javascript" src="pfad-zur-jquery-lib/jquery.js"></script>...
</head>
<script type="text/javascript">
function slideshow() {
var $imageContainer = $nextContainer;
$nextContainer = $nextContainer + 1;
if($nextContainer>$anzContainer) $nextContainer=1;
var $alt = $('#imageContainer-' + $imageContainer + ' IMG.toplevel');
if($alt.next().length)
var $neu = $alt.next();
else
var $neu = $('#imageContainer-' + $imageContainer + ' IMG:first');
$alt.addClass('middlelevel');
$alt.removeClass('toplevel');
$neu.css({opacity: 0.0});
$neu.addClass('toplevel');
$neu.animate({opacity: 1.0}, 2000, function(){
$alt.removeClass('middlelevel');
}); // 2000 = Dauer eines einzelnen Bildwechsels in ms
}
/* Hier wird die Slideshow gestartet und die Anzahl der Container auf dieser Seite und der Container für den ersten Bildwechsel definiert */
$(document).ready(function()
{
// Slideshow initialisieren
setInterval( "slideshow()", 4000 ); // Verzögerung für Bildwechsel in ms
$anzContainer = 1;
$nextContainer = 1;
});
</script>
