Add Fade Effect in Slideshow (Javascript)

Question

I have created a JavaScript Slideshow, but I don't know how to add the fade effect. Please tell me how to do it, and please tell in JavaScript only, no 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();

Answer 1

Much shorter than Ninja's solution and with hardware accelerated CSS3 animation. http://jsfiddle.net/pdb4kb1a/2/ Just make sure that the transition time (1s) is the same as the first timeout function (1000(ms)).

Plain 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

As an alternative. If you are trying to make a slider.

The usual approach is to animate a frame out and animate a frame in.

This is what makes the slide effect, and the fade effect work. Your example fades in. Which is fine, but maybe not what you really want once you see it working.

If what you really want is to animate images in and ...OUT you need something a little more complex.

To animate images in and out you must use an image element for each, then flip one out and flip one in. The images need to be placed on top of each other in the case of a fade, if you want to slide you lay them beside each other.

Your slideshow function then works the magic, but before you can do that you need to add all those images in your array into the dom, this is called dynamic dom injection and it's really cool.

Make sure you check the fiddle for the full working demo and code it's linked at the bottom.

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/

Answer 3

you can use this 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

            }

        }

    }

}();

this is how to use it

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

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

Answer 4

Much shorter answer:

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

}