Переходы слайдов CSS CSS

Question

Я написал простой JavaScript-код для простого слайд-шоу HTML; изображения находятся в массиве и меняются каждые 5 секунд.

Я хочу на 4-й секунде текущего изображения, чтобы он перешел на 0 opacity над 1 second, что означает, что после того, как изображение перешло и больше не видно, следующий должен загрузить, чтобы создать более плавный переход между все изображения.

Мой код выглядит следующим образом.

CSS

#slider { 
    opacity: 1; 
    transition: opacity 1s; 
    border-radius: 10px; 
    box-shadow: -5px 7px 5px #888888; 
    width: 99vw; 
    height: 470px; 
    align: middle; 
} 

#slider.fadeOut { 
    opacity: 0; 
} 

HTML

<img id="slider" src="Images/image1"> 

JavaScript

var imgArray = [ 
    'Images/image1.jpg', 
    'Images/image2.jpg', 
    'Images/image3.jpg', 
    'Images/image4.jpg', 
    'Images/image5.jpg', 
    'Images/image6.jpg', 
    'Images/image7.jpg', 
    'Images/image8.jpg' 
    ], 
curIndex = 0; 

imgDuration = 5000; 

function slideShow() { 
    document.getElementById('slider').className += "fadeOut"; 
    setTimeout(function() { 
     document.getElementById('slider').src = imgArray[curIndex]; 
     document.getElementById('slider').className = ""; 
    },1000); 

    curIndex++; 

    if (curIndex == imgArray.length) { 
     curIndex = 0; 
    } 

    setTimeout(slideShow, imgDuration); 
} 
slideShow(); 

Проблема заключается в том, что переходы нервными так что изображение будет исчезать в течение 1 секунды, а затем то же самое изображение показывается, тогда следующее изображение загрузится без перехода.

Я уверен, что это простое исправление, которое я пропускаю.

Answer 1

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

Ваш метод должен загружать изображение и использовать функцию обратного вызова, когда он будет завершен, а затем выполнить оставшуюся часть вашего процесса.

UPDATE:

Так что я знаю, что ваш пример использует переходы CSS и это использует JQuery, но я хотел, чтобы вы видите преимущество цепочки функций обратного вызова. Если вы внимательно посмотрите на это, вы увидите, как запрос img не выполняется до тех пор, пока завершение fadeout не будет завершено, тогда скрипт загрузит img, и только когда эта загрузка будет завершена, добавит ли это новое изображение в контейнер и исчезнет он в. Затем, как только это исчезло, следующий обратный вызов снова вызывает setTimeout, чтобы сохранить его. Таким образом, все ваши действия происходят последовательно.

var imgArray = [ 
 
    'http://www.fillmurray.com/200/300', 
 
    'http://www.fillmurray.com/300/200', 
 
    'http://www.fillmurray.com/500/200', 
 
    'http://www.fillmurray.com/300/600', 
 
    'http://www.fillmurray.com/350/200', 
 
    'http://www.fillmurray.com/300/350', 
 
    ], 
 
curIndex = 0; 
 
imgDuration = 5000; 
 

 
function slideShow() { 
 
    $("#slider").fadeOut('slow',function() { 
 
     var img = $("<img />").attr('src', imgArray[curIndex]) 
 
     .on('load', function() { 
 
      $("#slider").html(img).fadeIn('normal',function(){ 
 
       curIndex++; 
 
       if (curIndex == imgArray.length) { 
 
        curIndex = 0; 
 
       } 
 
       setTimeout(slideShow, imgDuration); 
 
      }); 
 
      
 
     }); 
 
    }); 
 
} 
 

 
slideShow();

#slider { 
 
    border-radius: 10px; 
 
    box-shadow: -5px 7px 5px #888888; 
 
} 
 

 
#slider img { 
 
    width: 99vw; 
 
    height: 470px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slider"></div>