Adding fade to simple slideshow with Javascript

Question

I have a very simple code I am using to run a small slideshow of images and want to add a fading effect when they change. I am not able to use any css or jquery and cannot find anything that does not involve those two.

<script type="text/javascript">
<!--
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="image2.jpg"
var image3=new Image()
image3.src="image3.jpg"
//-->
</script>
<img src="image1.jpg" name="slide" width="300" height="269" />
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
document.images.slide.src=eval("image1.src")
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",3000)
}
slideit()

//-->
</script>

score 0 · Answer 1 · answered Apr 22 '14 at 18:46

Using your current code, a fade won't work because it loses it's height and reference when you switch the src's. You are better off actually rendering out the img elements, and then switching the zIndexes and animating the opacity of the current/next slides.

score 0 · Answer 2 · edited May 23 '17 at 12:28

I've used some code drawn from this other question here on SO: Math: Ease In, ease Out a displacement using Hermite curve with time constraint

I've since minified the 5 animation interpolation functions and it's certainly less easy to read.

Here's an approach that works just fine - make sure you update the image sources to reflect valid images.

Basically, we call a function that will fade out the target element in 500ms, using 50 steps. Once this is done, we change the source of the image and then fade it back in again. Once this is done, we set a timeout of 3 seconds before we start all over again.

<!DOCTYPE html>
<html>
<head>
<script>
///////////////////////////////////////////////////////////////////////////////////////////function cubicHermite(a,b,d,e,c){var g=a*a,f=g*a;return(2*f-3*g+1)*b+(f-2*g+a)*e+(-2*f+3*g)*d+(f-g)*c}
function interp(a,b,d,e,c){var g,f;f=e/(a/2+b+d/2);g=f*a/2;f*=b;return result=c<=a?cubicHermite(c/a,0,g,0,f/b*a):c<=a+b?g+f*(c-a)/b:cubicHermite((c-a-b)/d,g+f,e,f/b*d,0)}
function linear(a){return a}
function cubic(a){return interp(0.35,0.3,0.35,1,a)}
function doAnim(a,b,d,e){var c=a/b;setTimeout(function(){doAnimStep(0,b,c,d,e)},c)}
function doAnimStep(a,b,d,e,c){a<=b?(setTimeout(function(){doAnimStep(a,b,d,e,c)},d),e(a/b),a++):void 0!=c&&null!=c&&c()}
///////////////////////////////////////////////////////////////////////////////////////////function animFadeIn(elem, callback)
{
    doAnim(250,20,function(raw){elem.style.opacity=cubic(raw)},callback);
}

function animFadeOut(elem, callback)
{
    doAnim(500,50,function(raw){elem.style.opacity=1-cubic(raw)},callback);
}
///////////////////////////////////////////////////////////////////////////////////////////

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    slideChange();
}

var imgNames = ["img/girl.png", "img/redbaron.png"];
var imgNum = 0;

function slideChange()
{
    animFadeOut(document.images.slide, afterSlideFadedOut);

    function afterSlideFadedOut()
    {
        document.images.slide.src = imgNames[imgNum];
        imgNum++;
        if (imgNum > imgNames.length-1)
            imgNum=0;
        animFadeIn(document.images.slide, afterSlideFadedIn);
    }

    function afterSlideFadedIn()
    {
        setTimeout(slideChange, 3000);
    }
}
</script>
</head>
<body>
    <img name="slide" width="300" height="269" />
</body>
</html>

score 0 · Accepted Answer · answered Apr 22 '14 at 19:15

Certainly, there is more than one way to do this, but I drummed up a fiddle for ya here:

JSFIDDLE

While this code could use some cleaning up, I chose to approach the problem like this:

var aImageURLs = [
    "http://fc00.deviantart.net/fs71/f/2012/329/5/0/wonderland___landscape_calendar__2_by_ivanandreevich-d4u0odw.jpg",
    "http://www.wallanu.com/wp-content/uploads/2014/03/landscape-3-hd-wallpapers.jpg", 
    "http://davidpaulboaz.org/slides/Capitol%20Reef%20Landscape.jpg"
];
var aImageObjects = [];

// build out objects
for (var i = 0; i < aImageURLs.length; i++) {
    var o = new Image();
    o.src = aImageURLs[i];
    aImageObjects[i] = o;
}

var slideImage = document.images.slide;
slideImage.currentSlide = 0;

function slideIt(iSlideFrequency) {
    function nextSlide() {
        // identify next slide
        slideImage.currentSlide++;
        slideImage.currentSlide = (slideImage.currentSlide % aImageObjects.length);
        // transition old slide out
        setOpacity(slideImage, 0);
        fadeOut(slideImage, 1000, function() {
            // transition new slide in
            slideImage.src = aImageObjects[slideImage.currentSlide].src;
            fadeIn(slideImage, 1000, function() {
                setTimeout(nextSlide, iSlideFrequency);
            });
        });
    }
    setTimeout(nextSlide, iSlideFrequency);
}

function fadeIn(oImg, iMillis, callback) {
    var iTicks = 100;
    var iWait = iMillis > iTicks ? Math.floor(iMillis/iTicks) : 0;
    var iTick = 0;
    var FadeMeIn = function(){
        var fOpacity = iTick/iTicks;
        setOpacity(oImg, fOpacity);
        iTick++;
        if (iTick <= iTicks) {
            setTimeout(FadeMeIn, iWait);
        }
        else {
            try { callback(); } catch(Err) {}
        }
    }
    FadeMeIn();    
}
function fadeOut(oImg, iMillis, callback) {
    var iTicks = 100;
    var iWait = iMillis > iTicks ? Math.floor(iMillis/iTicks) : 0;
    var iTick = 100;
    var FadeMeOut = function(){
        var fOpacity = iTick/iTicks;
        setOpacity(oImg, fOpacity);
        iTick--;
        if (iTick >= 0) {
            setTimeout(FadeMeOut, iWait);
        }
        else {
            try { callback(); } catch(Err) {}
        }
    }
    FadeMeOut();    
}

function setOpacity(oImg, fValue) {
    // assume "real browser" values (decimals)
    oImg.style.opacity = fValue;
    // adjust for IE
    var iValue = Math.ceil(fValue*100);
    oImg.style.filter = "alpha(opacity=" + iValue + ")";
}
slideIt(3000);

Adding fade to simple slideshow with Javascript

3 Answers3

Linked