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

4

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

@NoyGabay 不完全是重复,因为有定时器。这会使事情稍微复杂一点。 - Bram Vanroy
4个回答

12
比 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;
}

谢谢您!这正是我想要的。感谢您的帮助。 :) (Y) - Abhinv Bhagwat
我稍微改了一下,现在会在点击时淡入淡出 - http://jsfiddle.net/7p0kbxv8/谢谢,Stephan - Stephan

4
作为另一种选择,如果您想制作一个幻灯片。
通常的方法是动画化一个框架并动画化一个框架。这就是滑动效果和淡入淡出效果的原理。您的示例是淡入的。这很好,但是当您看到它在工作时可能不是您真正想要的。
如果您真正想要的是在图像中动画化...OUT,则需要使用更复杂的东西。
要在图像中动画化,必须为每个图像元素使用一个图像元素,然后将其中一个翻转出来并将其中一个翻转进去。在淡入淡出的情况下,如果您想要滑动,则将它们放在彼此旁边。
然后,您的幻灯片函数会起魔法作用,但在此之前,您需要将所有这些数组中的图像添加到dom中,这称为动态dom注入,非常酷。
确保您检查fiddle以获取完整的演示和代码,它链接在底部。
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();

Fiddle: http://jsfiddle.net/f8d1js04/2/


如果您想要真正的交叉淡入淡出效果,那么这就是正确的方法。其他答案只提供了顺序淡出/淡入效果,但是这个解决方案提供了同时进行的交叉淡入淡出,效果更好。感谢提供代码! - Velojet

1
你可以使用这段代码。
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

0
更简短的回答:
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;
       }
  }

}


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接