title: Change image more than one time using jquery
body: <p>I wrote this code so every time a button is clicked the background of a div will change 2 times:   </p>
  
  <pre><code>$("#auto").click(function() {
          setTimeout(function(){
               $('#screen').css('background-image','url(./img/2.jpg)');
                  }, 400);
          setTimeout(function(){
               $('#screen').css('background-image','url(./img/3.jpg)');
                  }, 800);
      });
  </code></pre>
  
  <p>But if we have many pictures, there should be a smarter way to do it without repeating thefunction. Can you guys help me? </p>
  
  <p>I have an idea of putting the pictures inside a div, but the code I have only change one picture at a time. How can I display all those pictures, in an interval of 1s for picture?  </p>
  
  <pre><code>&lt;div class="slides"&gt;
          &lt;div&gt;&lt;img src="img/0.jpg" &gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="img/1.jpg" &gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="img/2.jpg" &gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="img/3.jpg" &gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="img/4.jpg" &gt;&lt;/div&gt;   
          &lt;div&gt;&lt;img src="img/5.jpg" &gt;&lt;/div&gt; 
  &lt;/div&gt;
  
  var slider = $('.slides div');
      var intervalHandler = null;
      slider.hide();
      slider.eq(0).show();
      clickCount = 0;
  
  $("#auto").click(function(){
            clearInterval(intervalHandler);
            intervalHandler = setInterval(function(){$(".SlNextBT").click();},1000);
           if(clickCount &lt; slider.length)
                 slider.eq(clickCount++).hide();
           if(clickCount == slider.length)
               clickCount = 0;
            slider.eq(clickCount).show();
       }) ; 
  </code></pre>