Fade transition in JavaScript slide show

Question

I want to have a slide show in my web page with fading transition between the images but it's not working.

When I see the log, it seems that JavaScript doesn't respect the opacity values which are already defined in the style tag. The console says the opacity of the images is always the same.

By the way, if anyone can come up with a better way to write this code or make it simpler, please tell.

Michael Laszlo · Accepted Answer

Below is another way to implement a slideshow. I wrote it just now because I found your code to be pretty confusing, not to mention difficult to extend to further images.

To use my slideshow implementation, put your images inside the div with the ID slides. Once the images load, Slideshow.load runs. It wraps each image inside a div of class slide. It also enables the start button so that you can click on it to start the slideshow.

Another important thing that happens in Slideshow.load is the sizing of the picture frames. All of the frames are sized to the maximum width and height over all images. This allows each frame to fully hide the image behind it.

The fading transition is accomplished by setting the zIndex style attribute of the next image to 1000, which effectively brings it into the foreground. The current image has an opacity of 1 and the next image has 0. As we increase the opacity of the next image, it obscures the current image. When the next image reaches full opacity, its zIndex is reset to 0. After a pause, Slideshow.slideIndex is incremented modulo the number of images, and the fading process starts over.

When you run the following snippet, I recommend that you go to full-page mode so that you can appreciate the image sizes.

var Slideshow = {
  pictureFadeSeconds: 1,
  pictureHoldSeconds: 1,
  updatesPerSecond: 30
};

Slideshow.fade = function () {
  var slides = Slideshow.slides,
      index = Slideshow.slideIndex,
      slide = slides[index],
      nextSlide = slides[(index + 1) % slides.length];
  if (nextSlide.style.opacity == 0) {
    nextSlide.style.zIndex = 1000;  // Bring the slide into the foreground.
  }
  Slideshow.opacity +=
      1 / (Slideshow.updatesPerSecond * Slideshow.pictureFadeSeconds);
  nextSlide.style.opacity = Slideshow.opacity;
  if (Slideshow.opacity >= 1) {
    slide.style.opacity = 0;
    nextSlide.style.opacity = 1;
    nextSlide.style.zIndex = 0;   // Put the slide back in the middle ground.
    Slideshow.slideIndex = (index + 1) % slides.length;
    Slideshow.opacity = 0;
    window.setTimeout(Slideshow.fade, 1000 * Slideshow.pictureHoldSeconds);
  } else {
    window.setTimeout(Slideshow.fade, 1000 / Slideshow.updatesPerSecond);
  }
};

Slideshow.load = function () {
  var container = document.getElementById('slides'),
      images = container.getElementsByTagName('img'),
      maxWidth = images[0].offsetWidth,
      maxHeight = images[0].offsetHeight;
  for (var i = 1; i < images.length; ++i) {
    maxWidth = Math.max(maxWidth, images[i].offsetWidth);
  }
  var slides = Slideshow.slides = new Array(images.length);
  for (var i = 0; i < slides.length; ++i) {
    var image = images[i],
        slide = slides[i] = document.createElement('div');
    slide.className = 'slide';
    slide.style.width = maxWidth + 'px';
    slide.style.height = maxHeight + 'px';
    image.parentNode.insertBefore(slide, image);
    slide.appendChild(image);
    image.style.left = Math.floor((maxWidth - image.width) / 2) + 'px';
    image.style.top = Math.floor((maxHeight - image.height) / 2) + 'px';
  }
  var index = Slideshow.slideIndex = 0,
      slide = slides[index],
      nextSlide = slides[(index + 1) % slides.length];
  slide.style.opacity = 1;
  Slideshow.opacity = 0;
  var startButton = document.getElementById('startButton');
  startButton.onclick = function () {
    startButton.parentNode.removeChild(startButton);
    Slideshow.fade();
  };
  startButton.disabled = false;
};

window.onload = Slideshow.load;

body {
  background: #000;
}
.slide {
  position: absolute;
  margin: 0;
  padding: 0;
  opacity: 0;
  background: #000;
}
.slide img {
  position: absolute;
}
#startButton {
  position: fixed;
  top: 20px;
  left: 25px;
  font-size: 40px;
}

Fade transition in JavaScript slide show

Answers (2)

Related Questions