JavaScript Image Crossfade переходит к следующему изображению без затухания в HTML5 - PullRequest
Новая
       27

JavaScript Image Crossfade переходит к следующему изображению без затухания в HTML5

0 голосов
/ 06 ноября 2019

Перекрестное затенение изображений из 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 работает, но не может контролировать, какой цикл изображений

...