Ajouter un Effet de Fondu en Diaporama (Javascript)

J'ai créé un script JavaScript Diaporama, mais je ne sais pas comment ajouter un effet de fondu. S'il vous plaît dites-moi comment le faire, et s'il vous plaît dites en JavaScript, pas de jQuery!

Code:

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

double possible de Comment faire de fade-in et fade-out avec le JavaScript et le CSS
Pas exactement un double, en raison de la minuterie. Il rend les choses un peu peu plus compliqué.

OriginalL'auteur Abhinv Bhagwat | 2014-08-17

Beaucoup plus court que le Ninja de la solution et avec l'accélération matérielle CSS3 animation. http://jsfiddle.net/pdb4kb1a/2/ Assurez-vous que le temps de transition (1s) est la même que la première fonction de délai (1000(ms)).

Plaine 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;
}

Merci pour ce! C'est exactement ce que je Voulais. Votre aide est très appréciée. 🙂 (Y)

OriginalL'auteur Bram Vanroy

Comme une alternative. Si vous essayez de faire un curseur.

L'approche habituelle consiste à animer une image et l'animation d'une cadre.

C'est ce qui rend l'effet glissement, et l'effet de fondu de travail. Votre exemple des fondus dans. Ce qui est bien, mais peut-être pas ce que vous voulez vraiment une fois que vous voyez de travail.

Si ce que vous voulez vraiment est d'animer des images et ...vous avez besoin de quelque chose d'un peu plus complexe.

Pour animer des images et vous devez utiliser un élément de l'image pour chaque, puis retournez-les et retournez l'un dans. Les images doivent être placés sur le dessus les uns des autres dans le cas d'un fondu, si vous voulez faire glisser, vous poser les uns à côté des autres.

Votre fonction diaporama fonctionne alors de la magie, mais avant que vous pouvez faire que vous avez besoin d'ajouter toutes ces images dans votre tableau dans le dom, c'est dynamique, dom injection et c'est vraiment cool.

Assurez-vous de vérifier le violon pour toute la démo et le code c'est lié au fond.

HTML

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

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

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

C'est la voie à suivre si vous voulez un vrai cross-fade. D'autres réponses a juste donné un séquentielle fade-out/fade-en effet, mais c'est la solution simultanée cross-fade, ce qui est BEAUCOUP plus agréable. Merci pour le violon!

OriginalL'auteur MartinWebb

vous pouvez utiliser ce code

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

            }

        }

    }

}();

c'est la façon de l'utiliser

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

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

OriginalL'auteur Jack

Vous devez vous connecter pour publier un commentaire.