javascript image loop not working

Question

i dont know what to do as i am noob at javascript as i have just started learning today, so please go easy.

i think i need to increment it when it does an interval but i don't know how to do that and as well i dont want to do any jquery.

<html>
    <head>
        <style type="text/css">
            div {
                height: 300px;
                width: 500px;
                margin: 0 auto;
                overflow: hidden;
            }
        </style>
    </head>
    <body>

        <div>
            <img id="image" src="html.png" alt="HTML">
        </div>

        <script language="javascript" type="text/javascript">

            var i = 1;

            function loop() {
                var i = i + 1;
                if (i == 3) {
                    i = 1;
                }
                if (i == 1) {
                    document.getElementById('image').src = "html.png";
                } else {
                    document.getElementById('image').src = "css3.png";
                }
            }
            var pictureloop = setInterval(loop(), 5000);

        </script>

    </body>
</html>

First thing, Why you're declaring `var i` in loop again? just initialize it with `i=` — Dhaval Marthak, Feb 18 '14 at 15:07
setInterval expect a function as first argument (you're giving it the result of loop -> nothing). So remove the `()` ;) — Olwaro, Feb 18 '14 at 15:11
thanks guys just got it working it was me being a noob like usual :) — Tom, Feb 18 '14 at 15:13
@user3323986 This is your first question, so, this is not so usual. Welcome on SO :D — , Feb 18 '14 at 15:22

score 0 · Answer 1 · answered Feb 18 '14 at 15:14

0

You just have to try this:

Just set variable i in you loop() no need to re-declare once it's globally declared! and remove () from the setInterval() method

var i = 1;

function loop() {
    i = i + 1; // Change
    alert(i);
    if (i == 3) {
        i = 1;
    }
    if (i == 1) {
        document.getElementById('image').src = "html.png";
    } else {
        document.getElementById('image').src = "css3.png";
    }
}
setInterval(loop, 5000); //Change

Fiddle Demo

answered Feb 18 '14 at 15:14

Dhaval Marthak

17,246
6
46
68

Wouldn't it be better to remove the global declaration and move it to the inner scope, since he only uses it there? global declarations are intended for cross-function variables, not local variables. – Nzall Feb 18 '14 at 15:18
@NateKerkhofs Yeah it would be better if he declares it locally! As i've just guided OP not to declare a same variable 2 times whether it is set to local or global :) – Dhaval Marthak Feb 18 '14 at 15:20

score 0 · Answer 2 · edited May 23 '17 at 11:50

You just started learning javascript??

welcome ;)

function loop(){
 i=++i==3?1:i;
 //i is : if i+1 is 3 then 1 else its i (the already i+1)

 document.getElementById('image').src=(i==1?'html':'css3')+'.png';
 //src is : if i is 1 then html else css3

}
var pictureloop=setInterval(loop,1000),i=1;
//set all vars you need separated by comma.

DEMO

http://jsfiddle.net/9dZt6/1/

proper way

function loop(){
 i=!i;
 document.body.innerHTML=(i?'html':'css3')+'.png'
}
var pictureloop=setInterval(loop,1000),i=1;

DEMO

http://jsfiddle.net/cRn6n/

another way : html5 css3

css

div{
 background:#000 url(html.png) no-repeat center center;
 background-size:contain;// cover,auto,100px 100px 
}
div.odd{
 background-image:url(css3.png);
}

js

function toggle(){
 var div1=document.getElementsByTagName('div')[0];
 div1.classList.toggle('odd');
 timer=window.setTimeout(toggle,1e3);
}
var timer=window.setTimeout(toggle,1e3);

another way : check the path

function toggle(){
 img.src=(img.src=='http://path/html.png'?'css3':'html')+'.png';
}
var img=document.getElementById('image'),
    timer=window.setInterval(toggle,1e3);

+1 for not using jquery

https://stackoverflow.com/a/21353032/2450730

if you have any questions just ask.

javascript image loop not working

2 Answers2