Случайное изображение слайд-шоу, переход изображения постепенно исчезает?

Question

Я использую этот скрипт для слайд-шоу случайных изображений, пытаясь отобразить изображения спонсора. Сценарий работает нормально, я пытаюсь создать эффект постепенного появления и / или постепенного исчезновения.

Сценарий:

<script>
var delay=4000
var curindex=0

var randomimages=new Array()

    randomimages[0]="https://cdn4.sportngin.com/attachments/photo/5aed-137970385/cambria_large.jpg"
    randomimages[1]="https://cdn1.sportngin.com/attachments/photo/acab-137970605/9Round_large.png"
    randomimages[2]="https://cdn2.sportngin.com/attachments/photo/a12b-137971067/qdoba_large.jpg"
    randomimages[3]="https://cdn1.sportngin.com/attachments/photo/fcf5-137974579/chipotle_large.jpg"
    randomimages[4]="https://cdn3.sportngin.com/attachments/photo/3397-137974001/countryinn_large.jpg"


var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
    preload[n]=new Image()
    preload[n].src=randomimages[n]
}

document.write('<img class="fade-in" name="defaultimage" height="294" width="294" style="display:block; margin-left:auto; margin-right:auto;" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

    document.images.defaultimage.src=randomimages[curindex]

}

setInterval("rotateimage()",delay)
</script>

Сам сценарий работает нормально.

Это CSS, который я пробовал для перехода к изображению:

.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 4s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Когда страница загружает эффект постепенного изменения, работает на первом изображении, но ни на одном из последующих JSFiddle . Я надеюсь, что кто-то может направить меня в правильном направлении.

Answer 1

Вот решение, добавьте заметки внутрь:

var delay=4000
var curindex=0

var randomimages=new Array()

    randomimages[0]="https://cdn4.sportngin.com/attachments/photo/5aed-137970385/cambria_large.jpg"
    randomimages[1]="https://cdn1.sportngin.com/attachments/photo/acab-137970605/9Round_large.png"
    randomimages[2]="https://cdn2.sportngin.com/attachments/photo/a12b-137971067/qdoba_large.jpg"
    randomimages[3]="https://cdn1.sportngin.com/attachments/photo/fcf5-137974579/chipotle_large.jpg"
    randomimages[4]="https://cdn3.sportngin.com/attachments/photo/3397-137974001/countryinn_large.jpg"


var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
    preload[n]=new Image()
    preload[n].src=randomimages[n]
}

//document.write('<img class="fade-in" name="defaultimage" height="294" width="294" style="display:block; margin-left:auto; margin-right:auto;" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')
// place the image on container:
document.querySelector('figure').innerHTML = '<img class="fade-in" name="defaultimage" height="294" width="294" style="display:block; margin-left:auto; margin-right:auto;" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">';

function rotateimage()
{
document.querySelector('figure').innerHTML = ''; // clear image from container

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

//    document.images.defaultimage.src=randomimages[curindex]
// place image with different source on the container
document.querySelector('figure').innerHTML = '<img class="fade-in" name="defaultimage" height="294" width="294" style="display:block; margin-left:auto; margin-right:auto;" src="'+randomimages[curindex]+'">';

}

setInterval("rotateimage()",delay)

.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 4s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

<figure></figure>

Дополнительные важные примечания:

1. Ключом здесь является создание элемента, чтобы класс работал , Теперь вы просто меняете атрибут src, чтобы класс не менялся (это можно проверить с помощью инструментов разработчика браузера).

2. В вашем коде вы используете document.write. Я изменяю это на .innerHTML - оба считают ПЛОХОЙ практикой на производстве. Вы должны создать и добавить узлы . Я использую это здесь, потому что это быстро.