来自javascript的图像交叉淡入淡出不会交叉淡入淡出，图像只是按顺序对齐。
HTML幻灯片可以播放，但无法控制哪个图像循环
我已经获得了一些可以运行的代码，但是所有图像都在HTML中，必须在页面显示之前加载它们。在这里，使用JavaScript中的图像，据说只有一个图像首先加载，然后在javascript中加载更多。
HTML5代码
<STYLE>
img.slideshow-image {
padding: 0px;
margin: 10px;
border: 1px solid white;
position: absolute;
transition: opacity 5.0s ease-in;
z-index: -1;
}
img.slideshow-image + img.slideshow-image { opacity: 1.0; }
</STYLE>
<BODY>
<div class="unique">
<img id="slideshow-images" class="slideshow-image"
src="../pix_supply/revolving/Archaic_era_800.png" alt="Archaic Era">
</div>
</BODY>
JavaScript代码
$(document).ready(function(){
var imagePath = '../pix_supply/revolving/';
var images = ['Aegea_island_nb_800.png','Archaic_era_800.png','Samos_island_nb_800.png','Classical_era_800.png'];
var current = 0;
var revolverImage = document.getElementById("slideshow-images");
setInterval(function() {
imageFadeInOut(revolverImage,images[current]);
current++;
if(current >= images.length) current = 0;
},5000);
function imageFadeInOut (imageElement,image) {
imageElement.style.opacity = 0;
imageElement.src = imagePath + image;
imageElement.style.opacity = 1;
}
});
这些图像完全不会淡入淡出，只是一个接一个地显示而没有任何过渡。我还应该提到，我确实早些时候可以使用交叉淡入淡出，但是所有图片加载都在html中。这个问题的链接在这里： HTML slideshow works but unable to control which images cycle