JavaScript load images with specific duration

Question

I have two arrays : The first with images paths and the second is with different duration and I am trying using the following functions to set dynamically the 'setTimeout' of my 'changeImage()' function as follow:

            function changeImage(){
            var img = document.getElementById("img");
            img.src = images[x];
            var ztme = tme[x];
            x++;

            if(x >= images.length){
                x = 0;
            } 

            fadeImg(img, 100, true);
            setTimeout("changeImage()",ztme ); //This is the problem!
        }

        function fadeImg(el, val, fade){
            if(fade === true){
                val--;
            }else{
                val ++;
            }

            if(val > 0 && val < 100){
                el.style.opacity = val / 100;
                setTimeout(function(){fadeImg(el, val, fade);}, 10);
            }
        }

        var images = [],
        x = 0;
        images[0] = "daki/eco_pic.jpg";
        images[1] = "daki/art_tnt.gif";
        images[2] = "daki/mkv_uk.jpg";
        images[3] = "daki/bolo_trt.jpg";
        images[4] = "daki/folo_fr.jpg";

        var tme = [], //values of 'Time' for a picture to stay displayed
        tme[0]= 10000; 
        tme[1]= 50000; 
        tme[2]= 2000;
        tme[3]= 30000;
        tme[4]= 5000;
        setTimeout("changeImage()", 15000);

If I give a fixed number for the timeout everything is working like a charm. Therefore to set it dynamically generates just errors.

Any idea to let this changeImage() function get dynamically the time? Am gratefull to any help. Thank you in advance.

Please hit the `<>` and create a [mcve] and click TIDY before saving. Had you done that, you would have found the typo. Remove the comma in this statement `var tme = [], //values of 'Time' for a picture to stay displayed` — mplungjan, Mar 13 '17 at 08:41
You also need to check this http://stackoverflow.com/questions/6121203/how-to-do-fade-in-and-fade-out-with-javascript-and-css — mplungjan, Mar 13 '17 at 08:58

score -1 · Accepted Answer · answered Mar 13 '17 at 08:50

Your tme array is not properly initialized.you should used semi column after its declaration;

    var tme = []; //<= 
    tme[0]= 10000; 
    tme[1]= 50000; 
    tme[2]= 2000;
    tme[3]= 30000;
    tme[4]= 5000;
    setTimeout("changeImage()", 15000);

JavaScript load images with specific duration

1 Answers1