通过淡入背景图像制作幻灯片

Question

我想将横幅图片on this page变成幻灯片。我知道如何编写HTML和CSS，但我不擅长编写脚本。

我的想法是让文本保持原位，同时替换它后面的横幅图像。我希望看到新图像淡入。

如何使用JavaScript或jQuery实现此功能？

Answer 1

我为你实现了一个简单的淡出/淡入幻灯片放映。下面的演示使用您在评论中指定的三个大文件。幻灯片放映在图像加载之前不会起作用，因此您可能希望改善加载时间。

要在项目中使用此幻灯片，请将以下CSS规则合并到CSS文件中，然后将JavaScript插入页面并修改参数slideDelay，fadeLength和{{1} }以满足您的需求。

＆＃13;

＆＃13;

imageSources

＆＃13;

SlideShow = {
  slideDelay: 5,  // Number of seconds to wait before showing a new slide.
  fadeLength: 1,  // Number of seconds to spend fading in or fading out.
  hertz: 60     // Number of times per second to update the fade effect.
};

SlideShow.imageSources = [
  'http://preview.impactdesigns-ad.com/HBP/img/basecamp009.jpg',
  'http://preview.impactdesigns-ad.com/HBP/img/biohazard007.jpg',
  'http://preview.impactdesigns-ad.com/HBP/img/Header.png'
];

SlideShow.showSlide = function (newImage, oldImage) {
  var g = SlideShow,
      opacityIncrement = 1 / g.hertz,
      fade = { interval: {}, count: {} };
  function fadeOut() {  // Gradually makes the old image vanish.
    oldImage.style.opacity = fade.count.out * opacityIncrement;
    if (--fade.count.out == 0) {
      window.clearInterval(fade.interval.out);
      oldImage.style.visibility = 'hidden';
    }
  }
  function fadeIn() {  // Gradually makes the new image appear.
    newImage.style.opacity = 1 - fade.count.in * opacityIncrement;
    if (--fade.count.in == 0) {
      window.clearInterval(fade.interval.in);
    }
  }
  function newSlide() {  // Starts the fade-in process.
    newImage.style.opacity = 0;
    newImage.style.visibility = 'visible';
    fade.count.in = g.hertz;
    fade.interval.in = window.setInterval(fadeIn, g.fadeLength * 1000 / g.hertz);
  }
  if (oldImage) {  // Fade out the old, then fade in the new.
    window.setTimeout(newSlide, g.fadeLength * 1000);
    fade.count.out = g.hertz;
    fade.interval.out = window.setInterval(fadeOut, g.fadeLength * 1000 / g.hertz);
  } else {  // If there is no old image, immediately fade in the new image.
    newSlide(); 
  } 
}   

SlideShow.replaceSlide = function () {  // Updates slideIndex and calls showSlide.
  var g = SlideShow,
      images = g.images,
      oldImage = images[g.slideIndex];
  g.slideIndex = ++g.slideIndex % images.length;
  var newImage = images[g.slideIndex];
  g.showSlide(newImage, oldImage);
};
    
SlideShow.stop = function () { 
  var g = SlideShow,
      interval = g.interval;
  window.clearInterval(interval);
}       

SlideShow.start = function () {
  var g = SlideShow,
      imageSources = g.imageSources,
      images = g.images = [],
      container = document.getElementById('slideContainer'),
      background = g.background = document.createElement('div');
  background.className = 'background';
  for (var i = 0; i < imageSources.length; ++i) {
    var image = document.createElement('img');
    image.src = imageSources[i];
    image.style.visibility = 'hidden';
    images.push(image);
    background.appendChild(image);
  }
  container.appendChild(background);
  var startInterval = window.setInterval(function () {
    for (var i = 0; i < images.length; ++i) {
      if (images[i].height == 0) {  // Wait until all images are loaded.
        return;
      }
    }
    window.clearInterval(startInterval);
    g.slideIndex = 0;
    g.showSlide(images[g.slideIndex]);
    g.interval = window.setInterval(g.replaceSlide, g.slideDelay * 1000);
  }, 100);
};

SlideShow.start();

＆＃13;

#slideContainer {
  font-family: sans-serif;
  font-weight: bold;
  font-style: italic;
  font-size: 48px;
  color: #cb4949;
  width: 1000px;
  height: 700px;
  overflow: hidden;
  position: relative;
}
#slideContainer span {
  padding: 20px;
  text-align: center;
  position: absolute;
  z-index: 10;
}
#slideContainer .background, #slideContainer .background img {
  position: absolute;
  left: 0;
  top: 0;
}

＆＃13;

＆＃13;

＆＃13;