Zapętlenie zmiany zdjęć

Question

Witam,

Jak zapętlić zmianę zdjęć w "sliderze"?

Zmiana następuje poprzez:

window.setInterval(function()
     {
    var trial = document.querySelector('.trial');
    window.setTimeout(function()
{
    
    trial.style.backgroundImage = 'url("https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg")';
        trial.style.transitionDuration = "1s";
  
},30000)  
})   

Zmiana następuje więc z opóźnieniem

 

Próbowałem zrobić tablicę i pętle:

var imageTable = ['images/trolltunga-9064-1920x1200.jpg','https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg','images/example-slide-350-3.jpg'];
   
            for (var i=0; i<imageTable.length; i++)
                {
                  var now = imageTable[i];
                    
 window.setInterval(function()
     {
    var trial = document.querySelector('.trial');
    window.setTimeout(function()
{
    trial.style.backgroundImage = "url('"+now+"')";
        trial.style.transitionDuration = "1s";
  
},5000)  
})    

}

Efekt: http://bakr-test.esy.es/szansa-web/

Answer 1

    window.setTimeout(function()
{
     
    trial.style.backgroundImage = 'url("https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg")';
        trial.style.transitionDuration = "1s";
   
},30000)  

setTimeout odpala się tylko raz z opóżniem. Musisz stworzyć rekurencję w tej funkcji (odwołanie do samej siebie)lub użyc setInterval.

 

           for (var i=0; i<imageTable.length; i++)
                {
                  var now = imageTable[i];
                     
 window.setInterval(function()
     {
    var trial = document.querySelector('.trial');
    window.setTimeout(function()
{
    trial.style.backgroundImage = "url('"+now+"')";
        trial.style.transitionDuration = "1s";
   
},5000)  
})    
 
}

Nie rób, tak w ten sposób, tworzysz setInterval który każdy żyje swoim życiem. Stwórz setInterval i niech i wzrasta za kadym razem po wykonanie interwału (Znajdziesz mnóstwo skryptów na ten temat).

Answer 2

W sumie zdjęcia można zapętlić bez pętli.  Taki wzór możesz go wykorzystać do swojego skryptu. 

var n = -1;
    var arr = [1, 2, 3, 4];
    function slides(){
        n = n + 1;
        if(n >= 4) n = 0;
        $("txt").innerHTML = arr[n];
    }
    window.onload = function(){
        slides();
        setInterval("slides()", 2000);
   }