我想在网页中进行幻灯播放，图像之间的过渡淡化，但无法正常工作。
<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不尊重style标签中已经定义的不透明度值。控制台说图像的不透明度总是相同的。
顺便说一句，如果有人想出一种更好的方法来编写此代码或使其更简单，请告诉。
最佳答案
下面是实现幻灯片放映的另一种方法。我之所以写它，是因为我发现您的代码非常混乱，更不用说扩展到其他图像了。
要使用我的幻灯片显示实现，请将图像放入ID为div的slides中。图像加载后，Slideshow.load运行。它将每个图像包装在类div的slide中。它还启用start按钮，以便您可以单击它以开始幻灯片放映。Slideshow.load中发生的另一件重要的事情是相框的尺寸。在所有图像上，所有帧的大小均设置为最大宽度和高度。这样一来，每个帧即可完全隐藏其后的图像。
通过将下一张图像的zIndex样式属性设置为1000可以完成淡入淡出过渡，从而将其有效地置于前景中。当前图像的不透明度为1，下一张图像的不透明度为0。随着我们增加下一张图像的不透明度，它会遮盖当前图像。当下一张图像达到完全不透明时，其zIndex重置为0。暂停后，Slideshow.slideIndex以图像数量为模增加，并且淡入淡出过程重新开始。
当您运行以下代码段时，建议您进入整页模式，以便欣赏图像的大小。
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;
}<div id="slides">
<img src="http://michaellaszlo.com/so/slideshow/assets/apple.jpg" alt="apple" />
<img src="http://michaellaszlo.com/so/slideshow/assets/pear.jpg" alt="pear" />
<img src="http://michaellaszlo.com/so/slideshow/assets/orange.jpg" alt="orange" />
<img src="http://michaellaszlo.com/so/slideshow/assets/banana.jpg" alt="banana" />
<img src="http://michaellaszlo.com/so/slideshow/assets/pineapple.jpg" alt="pineapple" />
<img src="http://michaellaszlo.com/so/slideshow/assets/kiwi.jpg" alt="kiwi" />
</div>
<button id="startButton" disabled>start</button>关于javascript - JavaScript幻灯片放映中的淡入淡出过渡，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32222545/