javascript - 在幻灯片放映中添加淡入淡出效果(JavaScript)

我已经创建了一个JavaScript幻灯片，但是我不知道如何添加淡入淡出效果。请告诉我该怎么做，请仅使用JavaScript而不使用jQuery!

码:

var imgArray = [
    'img/slider1.jpg',
    'img/slider2.jpg',
    'img/slider3.jpg'],
    curIndex = 0;
    imgDuration = 3000;

function slideShow() {
    document.getElementById('slider').src = imgArray[curIndex];
    curIndex++;
    if (curIndex == imgArray.length) { curIndex = 0; }
    setTimeout("slideShow()", imgDuration);
}
slideShow();

最佳答案

比忍者的解决方案短得多，并且具有硬件加速的CSS3动画。 http://jsfiddle.net/pdb4kb1a/2/只要确保过渡时间(1s)与第一个超时功能(1000(ms))相同即可。

普通JS

var imgArray = [
    'http://placehold.it/300x200',
    'http://placehold.it/200x100',
    'http://placehold.it/400x300'],
    curIndex = 0;
    imgDuration = 3000;

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();

CSS

#slider {
    opacity:1;
    transition: opacity 1s;
}

#slider.fadeOut {
    opacity:0;
}