HTML CSS幻燈片過渡

Question

我為一個簡單的HTML幻燈片編寫了一個簡單的JavaScript代碼。 圖像位於陣列中，每5秒鍾更改一次。

我希望當前圖像的第4秒在1 second過渡到0 opacity ，這意味着一旦圖像過渡並且不再可見，就應該加載下一個圖像，以便在所有圖像之間創建更平滑的過渡。

我的代碼如下。

的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時，它仍然必須加載映像文件，並且在繼續其余過程之前，您不必等待它發生。

您的方法應加載圖像並在完成后使用回調函數，然后執行其余過程。

更新：

因此，我知道您的示例使用CSS過渡，並且使用jQuery，但我希望您看到鏈接回調函數的好處。 如果仔細查看，您將看到在淡出完成之前如何發出img請求，然后腳本加載了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>