改变图像使用jQuery

Question

我写了这个代码不止一个时间，让每一个按钮被点击一个div的背景时间会改变2次：

$("#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); 
    }); 

但是，如果我们有很多的图片，应该有一个更聪明的方式来做到这一点，而不必重复功能。你们能帮我吗？

我有一个将图片放入div的想法，但是我一次只能更改一张图片。我如何显示所有这些图片，间隔1秒的图片？

<div class="slides"> 
     <div><img src="img/0.jpg" ></div> 
     <div><img src="img/1.jpg" ></div> 
     <div><img src="img/2.jpg" ></div> 
     <div><img src="img/3.jpg" ></div> 
     <div><img src="img/4.jpg" ></div> 
     <div><img src="img/5.jpg" ></div> 
</div> 

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 < slider.length) 
       slider.eq(clickCount++).hide(); 
     if(clickCount == slider.length) 
      clickCount = 0; 
      slider.eq(clickCount).show(); 
    }) ; 

Answer 1

应该很容易使这个更通用，并能够容纳大量的图片，而不用硬编码每一个。从0循环到图像数量，将计数器变量乘以要在setTimeout调用中显示每个图像多长时间，并动态构建图像url（因为它是数字）。

function changeImage(index) { 
    return function() { 
     var currentImage = './img/'+(index+1)+'.jpg'; 
     $('#screen').css('background-image','url('+currentImage+')'); 
    } 
} 

$("#auto").click(function() { 
    // let's say you have 5 pictures 
    var numberOfPictures = 5; 
    // 1 second 
    var waitPeriod = 1000; 

    for (var i = 0; i < numberOfPictures; i++) { 
     setTimeout(changeImage(i), i * waitPeriod); 
    } 
});