Update div every few seconds

Question

I have a simple html page on which I call some photo from some website. This image is updated every 30seconds so I would like to update my div every 30 seconds if that is possible using javascript. I tried different things but couldn't wrap my mind around it. Some help would be appreciated.

Here is my html :

            <section class="stack-view">
            <ul class="stack-list">
                <li class="stack-1 cam-list-item">
                    <ul>
                        <li>
                            <ul class="sub-cam">
                                <li>
                                    <p class="help-desc ps-note stack-name"></p>
                                    <img class="img"   alt="" >
                                </li>

                                <li>
                                    <p class="help-desc ps-note stack-name"></p>
                                    <img class="img"  alt="" >
                                </li>

                                <li>
                                    <p class="help-desc ps-note stack-name"></p>
                                    <img class="img"  alt="" >
                                </li>

                                <li>
                                    <p class="help-desc ps-note stack-name"></p>
                                    <img class="img"  alt="" >
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </section>

And this is my javascript :

     var values = 
                      [ 
                          {url : "http://here/is/some/url/I/need"}, 
                          {url : "http://here/is/some/url/I/need"}, 
                          {url : "http://here/is/some/url/I/need"}, 
                          {url : "http://here/is/some/url/I/need"}
                      ];
    (function(){
        var i = 0;
        $('.img').each(function() {
            $(this).attr( "src", values[i].url );
            i++;
        });
    })();

This is what I have tried but it doesn't work.

    setTimeout(function(){
        var i = 0;
        $('.img').each(function() {
            $(this).attr( "src", values[i].url );
            i++;
        });
    }, 3000);

Any idea guys on how I can approach this problem? Thanks.

Answer 1

in this line:

(function(){
    var i = 0;
    $('.img').each(function() {
        **$(this).html(values[i].url);**
        i++;
    });

instead : $(this).html(values[i].url); use: $(this).attr( "src", values[i].url );