Question

我希望在我的网页上有一个幻灯片放映，图片之间有过淡的过渡，但它无效。

<body>
 <!-- Css Work -->
<style>
    img#ssio{
        position:absolute;
        opacity:1;
        margin:0;
        padding:0;
    }
    img#ssie{
        opacity:0;
        margin:0;
        padding:0;
    }
</style>

<!-- JS Work -->

<script>
    var ssion = 1;
    var ssien = 2;
    function slide() {
        document.getElementById("ssio").src = "../images/slideshow/" + ssion + ".jpg";
        document.getElementById("ssie").src = "../images/slideshow/" + ssien + ".jpg";
        ssion += 2;
        ssien += 2;
        if (ssien == 6) {
            ssion = 1;
            ssien = 2;
        }
        setTimeout(slide, 5000);
    }
    function fader() {
        document.getElementById("ssio").style.opacity = 1 - document.getElementById("ssio").style.opacity;
        document.getElementById("ssie").style.opacity = 1 - document.getElementById("ssie").style.opacity;
        console.log(document.getElementById("ssio").style.opacity, document.getElementById("ssie").style.opacity)
        setTimeout(fader, 5000);
    }
</script>


<img id="ssio" src="../images/slideshow/1.jpg" alt="slideshow" style="width:100%;height:80%;" />
<img id="ssie" src="../images/slideshow/2.jpg" alt="slideshow" style="width:100%;height:80%;" />
<button onclick="slide(),fader()">start</button>

当我看到日志时，似乎JavaScript不尊重已在样式标记中定义的不透明度值。控制台说图像的不透明度始终相同。

顺便说一句，如果有人能想出一个更好的方法来编写这段代码或者让它变得更简单，请告诉你。

Answer 1

以下是实现幻灯片演示的另一种方法。我刚刚写了这篇文章，因为我发现你的代码很混乱，更不用说难以扩展到更多的图像了。

要使用我的幻灯片实现，请将您的图片放入ID为div的{{1}}内。加载图像后，slides会运行。它将每个图像包含在Slideshow.load类div内。它还会启用slide按钮，以便您可以单击它以开始幻灯片放映。

start中发生的另一件重要事情是图片框的大小调整。所有框架的尺寸均适合所有图像的最大宽度和高度。这允许每个帧完全隐藏它后面的图像。

通过将下一个图像的Slideshow.load样式属性设置为1000来实现淡入过渡，这有效地将其带入前景。当前图像的不透明度为1，下一个图像为0.当我们增加下一个图像的不透明度时，它会遮挡当前图像。当下一个图像达到完全不透明度时，其zIndex将重置为0.暂停后，zIndex以图像数量为模递增，并且淡入淡出过程重新开始。

当您运行以下代码段时，我建议您转到整页模式，以便欣赏图像尺寸。

＆＃13;

Slideshow.slideIndex

＆＃13;

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;

＆＃13;

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;
}

＆＃13;

Answer 2

这是我修复它的方式：

<body>

<!-- Css Work -->

<style>
    img#ssio{
        transition:opacity 1s;
        position:absolute;
        opacity:1;
        margin:0;
        padding:0;
    }
    img#ssie{
        transition:opacity 1s;
        opacity:0;
        margin:0;
        padding:0;
    }
</style>

<!-- JS Work -->

<script>
    var ssion = 1;
    var ssien = 2;
    function slide() {
        document.getElementById("ssie").src = "../images/slideshow/" + ssien + ".jpg";
        ssion += 2;
        ssien += 2;
        if (ssien == 13) {
            ssion = 1;
            ssien = 2;
        }
        setTimeout(slide, 8000);
        setTimeout(slidesupport, 4000)
    }
    function slidesupport() {
        document.getElementById("ssio").src = "../images/slideshow/" + ssion + ".jpg";
    }
    function fader() {
        document.getElementById("ssio").style.opacity = document.getElementById("ssie").style.opacity;
        document.getElementById("ssie").style.opacity = 1 - document.getElementById("ssio").style.opacity;
        setTimeout(fader, 4000);
    }
</script>


<img id="ssio" src="../images/slideshow/1.jpg" alt="slideshow" style="width:100%;height:80%;" />
<img id="ssie" src="../images/slideshow/2.jpg" alt="slideshow" style="width:100%;height:80%;" />
<button onclick="slide(),fader()">start</button>

JavaScript幻灯片放映中的淡入淡出过渡

2 个答案: