Question

155

Add Fade Effect in Slideshow (Javascript)

rated 0 times [ 160] [ 5] / answers: 1 / hits: 53480 / 10 Years ago, sun, august 17, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jesse

Add To Favorites

Follow

Total Points: 513

Total Questions: 118

Total Answers: 106

Location: Denmark

Member since Tue, Jul 19, 2022

2 Years ago

answered 10 Years ago kevonmoisesf · Accepted Answer

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;

}