JavaScript: Diashow
Hier ein Beispiel einer einfachen Diashow mit verschiedenen Übergangseffekten:
Und hier der dazugehörige Quelltext:
Code kopieren
<!DOCTYPE html>
<html lang="de">
<head>
<title>Diashow</title>
<meta charset="UTF-8">
<style>
#slides { border:2px solid white; position:relative; overflow:hidden; }
#slides img { position:absolute; top:0; left:0; transition-property:opacity,left,top,width,height,transform; transition-timing-function:linear; transform:rotate(0deg); }
</style>
</head>
<body>
<div id="slides">
<img id="img1" style="z-index:0;" alt="">
<img id="img2" style="z-index:1;" alt="">
</div>
<script>
data = ["img/show1.jpg", "img/show2.jpg", "img/show3.jpg", "img/show4.jpg", "img/show5.jpg"];
w = 300; h = 400; // image width and height
s = 3000; // speed
d = 1000; // transition duration in ms
SLIDES = document.getElementById("slides");
SLIDES.style.width = w + "px";
SLIDES.style.height = h + "px";
I1 = document.getElementById("img1");
I2 = document.getElementById("img2");
I1.style.width = w + "px";
I1.style.height = h + "px";
I2.style.width = w + "px";
I2.style.height = h + "px";
I1.style.transitionDuration = d + "ms";
I2.style.transitionDuration = d + "ms";
n = 0;
I2.src = data[n];
function slideShow() {
if (I1.style.zIndex == 0) { L1 = I1; L2 = I2; } else { L1 = I2; L2 = I1; }
S1 = L1.style;
S2 = L2.style;
// load next image
n++; if (n == data.length) n = 0;
L1.src = data[n];
// apply transition effect
switch (Math.floor(Math.random() * 9)) {
//switch (8) {
case 0: // blend into
S2.opacity = 0;
break;
case 1: // swipe right
S2.left = h + "px";
break;
case 2: // swipe left
S2.left = -h + "px";
break;
case 3: // swipe down
S2.top = h + "px";
break;
case 4: // swipe up
S2.top = -h + "px";
break;
case 5: // collapse horizontal
S2.left = (w / 2) + "px";
S2.width = "0px";
break;
case 6: // collapse vertical
S2.top = (h / 2) + "px";
S2.height = "0px";
break;
case 7: // zoom out
S2.left = (w / 2) + "px";
S2.top = (h / 2) + "px";
S2.width = "0px";
S2.height = "0px";
break;
case 8: // rotate out
S2.transform = "rotate(90deg)";
S2.transformOrigin = "bottom right";
break;
}
setTimeout(function(){
// flip layers
S1.zIndex = 1;
S2.zIndex = 0;
// reset styles
S2.opacity = 1;
S2.left = S2.top = 0;
S2.width = w + "px";
S2.height = h + "px";
S2.transform = "rotate(0deg)";
S2.transformOrigin = "";
}, d);
}
setInterval(slideShow, s);
</script>
</body>
</html>