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>