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

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

#slider {
    opacity:1;
    transition: opacity 1s; 
}
#slider.fadeOut {
    opacity:0;
}

作为备选。如果你想做一个滑块。

通常的方法是动画化一帧，动画化一帧。

这是使幻灯片效果和淡出效果工作的原因。你的例子很明显。这很好，但当你看到它工作时，可能不是你真正想要的。

如果你真正想要的是动画图像和…你需要一些更复杂的东西。

要使图像动画化，你必须为每个图像使用一个图像元素，然后将一个翻转出来，再将一个翻转进来。在渐变的情况下，图像需要放在彼此的顶部，如果你想滑动，你把它们放在彼此的旁边。

然后你的slideshow函数就会起作用，但在此之前，你需要将数组中的所有图像添加到dom中，这被称为动态dom注入，它真的很酷。

确保你检查了完整的工作演示和代码，它的链接在底部。

<div id="slider">
// ...we will dynamically add your images here, we need element for each image
</div>

JS

var curIndex = 0,
    imgDuration = 3000,
    slider = document.getElementById("slider"),
    slides = slider.childNodes; //get a hook on all child elements, this is live so anything we add will get listed
    imgArray = [
        'http://placehold.it/300x200',
        'http://placehold.it/200x100',
        'http://placehold.it/400x300'];

//
// Dynamically add each image frame into the dom;
//
function buildSlideShow(arr) {
    for (i = 0; i < arr.length; i++) {
        var img = document.createElement('img');
        img.src = arr[i];
        slider.appendChild(img);
    }
    // note the slides reference will now contain the images so we can access them
}
//
// Our slideshow function, we can call this and it flips the image instantly, once it is called it will roll
// our images at given interval [imgDuration];
//
function slideShow() {
    function fadeIn(e) {
        e.className = "fadeIn";
    };
    function fadeOut(e) {
        e.className = "";
    };

        // first we start the existing image fading out;
        fadeOut(slides[curIndex]);
        // then we start the next image fading in, making sure if we are at the end we restart!
        curIndex++;
        if (curIndex == slides.length) {
            curIndex = 0;
        }
        fadeIn(slides[curIndex]);
        // now we are done we recall this function with a timer, simple.
        setTimeout(function () {
            slideShow();
        }, imgDuration);
    };

    // first build the slider, then start it rolling!
    buildSlideShow(imgArray);
    slideShow();

小提琴:http://jsfiddle.net/f8d1js04/2/