在幻灯片中添加淡入淡出效果(Javascript)

Question

我创建了一个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();

Answer 1

比Ninja的解决方案和硬件加速的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;
}