Изменить изображение более чем один раз с помощью 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); 
    } 
});