改變圖像使用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); 
    } 
});