在幻灯片中添加淡入淡出效果（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;
}

Answer 2

作为备选。如果您正在尝试制作滑块。

通常的方法是为框架设置动画并为框架设置动画。

这是使幻灯片效果和淡入淡出效果起作用的原因。你的例子渐渐消失。哪个好，但也许不是你看到它真正想要的东西。

如果您真正想要的是在...中动画图像，那么您需要更复杂的东西。

要使图像进出动画，你必须为每个图像元素使用一个图像元素，然后翻转一个并翻转一个。在淡入淡出的情况下，图像需要放在彼此的顶部，如果你想要滑动你放置它们彼此相邻。

你的幻灯片功能然后起作用，但在你能够做到这一点之前，你需要将你阵列中的所有图像添加到dom中，这称为动态dom注入，它真的很酷。

确保您检查完整工作演示的小提琴，并在底部链接编码。

HTML

<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/

Answer 3

你可以使用这段代码

var fadeEffect=function(){

    return{

        init:function(id, flag, target){

            this.elem = document.getElementById(id);

            clearInterval(this.elem.si);

            this.target = target ? target : flag ? 100 : 0;

            this.flag = flag || -1;

            this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;

            this.elem.si = setInterval(function(){fadeEffect.tween()}, 20);

        },

        tween:function(){

            if(this.alpha == this.target){

                clearInterval(this.elem.si);

            }else{

                var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);

                this.elem.style.opacity = value / 100;

                this.elem.style.filter = 'alpha(opacity=' + value + ')';

                this.alpha = value

            }

        }

    }

}();

这是如何使用它

fadeEffect.init('fade', 1, 50) // fade in the "fade" element to 50% transparency

fadeEffect.init('fade', 1) // fade out the "fade" element

Answer 4

答案简短得多：

HTML：

<div class="js-slideshow">
    <img src="[your/image/path]">
    <img src="[your/image/path]" class="is-shown">
    <img src="[your/image/path]">
</div>

使用Javascript：

setInterval(function(){
    var $container = $('.js-slideshow'),
        $currentImage = $container.find('.is-shown'),
        currentImageIndex = $currentImage.index() + 1,
        imagesLength = $container.find('img').length;

    $currentImage.removeClass('is-shown');
    $currentImage.next('img').addClass('is-shown');

    if ( currentImageIndex == imagesLength ) {
        $container.find('img').first().addClass('is-shown');
    }
}, 5000)

SCSS

.promo-banner {
   height: 300px;
   width: 100%;
   overflow: hidden;
   position: relative;

   img {
       width: 100%;
       height: 100%;

       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;

       opacity: 0;
       z-index: -10;
       transition: all 800ms;

       &.is-shown {
           transition: all 800ms;
           opacity: 1;
           z-index: 10;
       }
  }

}