javascript - HTML CSS 幻灯片过渡

Question

我为一个简单的 HTML 幻灯片写了一个简单的 JavaScript 代码；图像在一个数组中，每 5 秒更改一次。

我希望在当前图像的第 4 秒，它在 1 秒 内过渡到 0 不透明度，这意味着一旦图像已经过渡并且不再可见，下一个应该加载，以便在所有图像之间创建更平滑的过渡。

我的代码如下。

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>