using setinterval for image slideshow

Question

I am trying to create a simple image slideshow using javascript, but it doesn't work.

<script>
var image=document.getElementById("aaa");
var img_array=["images/Chrysanthemum.jpg","images/desert.jpg","images/koala.jpg","images/penguins.jpg","images/hydrangeas.jpg","images/lighthouse.jpg","images/jellyfish.jpg"];
var index=0;
function slide()
{
    image.setAttribute("src",img_array[index]);
    index++;
    if(index>=img_array.length)
    {
    index=0;
    }
}
setInterval("slide()",2000);
</script>
</head>
<body>
<img id="aaa" src="images/tulips.jpg" width="400" height="400" name="image" />
</body>

score 3 · Accepted Answer · answered Feb 06 '13 at 09:48

simple way:

window.onload = function() {
    var image=document.getElementById("aaa");
    var img_array=[...];
    var index=0;
    var interval = 2000;
    function slide() {
        image.src = img_array[index++%img_array.length];
    }

    setInterval(slide, interval);
}

better way:

change setInterval(slide,2000); to:

setTimeout(function() {
    slide();
    setTimeout(arguments.callee, interval)
}, interval);

score 2 · Answer 2 · answered Feb 06 '13 at 09:39

2

Hello bellow is fixed version of your code that works.

<script>
var image = document.getElementById("aaa");
var img_array=["http://png-4.findicons.com/files/icons/1008/quiet/256/java.png","http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/System-Java-icon.png"];
var index=0;
function slide()
{

    document["aaa"].src = img_array[index];
    index++;
    if(index>=img_array.length)
    {
    index=0;
    }
}
setInterval("slide()",2000);
</script>
</head>
<body>
<img id="aaa" src="http://www.tutorialsscripts.com/free-icons/programming-language/java-icons/purple-java-icon-256-x-256.gif" width="400" height="400" name="image" />

answered Feb 06 '13 at 09:39

svlada

3,218
2
25
36

what was the problem with my code?is it due to the setattribute? – DjangoDev Feb 06 '13 at 09:45
Yes, your code did not work because of setAttribute, and document.getElementById("aaa") was returnig null. – svlada Feb 06 '13 at 09:46
to be more precisely, you called `document.getElementById('aaa')` before the 'aaa' was loaded. so the `image` always be null. setInterval accept a function as param, so that you can code `setInterval(slide, 200)` directly. – Rain Diao Feb 06 '13 at 09:54

score 0 · Answer 3 · answered Feb 06 '13 at 09:35

0

Replace your setinterval call with the following

setInterval(function(){slide()},2000);

answered Feb 06 '13 at 09:35

amit1310

8,825
2
12
12

score 0 · Answer 4 · edited Jan 29 '19 at 08:43

0

Instead of

setInterval("slide()",2000);

Put

setInterval(slide,2000);

edited Jan 29 '19 at 08:43

4b0

21,981
30
95
142

answered Jan 29 '19 at 08:41

Girish Khorate

1
1

score -2 · Answer 5 · edited Sep 22 '17 at 13:10

Code :

function slideshow()
{
    var slides= ["background-image : url(image/1.jpg)","background-image : url(image/2.jpg)"];
    var i = 0;
    var divh = document.getElementById("demo").style ;
    while( i < slides.length)
    {           
        if( i == (slides.length-1) )
            {
                divh = slides[i];
                i = 0;
            }
        else
        {
            divh = slides[i];
             i++ ;
        }                      
    }
}

using setinterval for image slideshow

5 Answers5

Linked