CODEWITHSUNDEEP
jquery
Mairaj Ahmad
Mairaj Ahmad

Reputation: 14604

Using SetTimeout and .each Jquery

I want to use settimeout() function with .each function.Basically iwant to show each image for 5 seconds and then next but i am only able to see last image.The .each executes and do not stop for 3 seconds.How can i do this?This is how i am doing.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function () {

        $('#Images').find('li').each(function () {
            var img = this;
            setTimeout(function () {
                Start(img);
            }, 3000);

        });


    });
    function Start(img) {
        $('#slideshow').html(img);
    }
   </script>
   </head>
   <body>
   <form id="form1" runat="server">
<div id="slideshow">
</div>
<div style="display:none;">
<ul id="Images">
<li><img src="images/ajax-loader.gif" /></li>
<li><img src="images/Ajax Loader White.gif" /></li>
<li><img src="images/fancybox_sprite.png" /></li>
</ul>
</div>
</form>

Upvotes: 0

Views: 738

Answers (2)

Yograj Gupta
Yograj Gupta

Reputation: 9869

Try this 

var images = $('#Images').find('li');
var imageCount = images.length;
var counter = 0;
setTimeout(function(){
Start(images[counter++]);
if(counter>=imageCount)
    counter =0 ;

},3000);

Upvotes: 0

Arkadiusz &#39;flies&#39; Rzadkowolski
Arkadiusz &#39;flies&#39; Rzadkowolski

Reputation: 5817

Try this one:

    $('#Images').find('li').each(function (k,v) {
        var img = this;
        changeImg(img, k);
    });

    function changeImg(img, k) {
        setTimeout(function () {
            Start(img);
        }, 3000*(k+1));
    }

Upvotes: 1

Related Questions