Переключение изображений

Question

То, что я пытаюсь сделать, это просто переключить фоновое изображение DIV каждые x интервалов времени.

Это то, что я имею на данный момент:

// Object of Background images per make 
var bs = { 
    "time": 2000, 
     "url": { 
     "BMW": ["url('img/cars/bmw/1.jpg')", "url('img/cars/bmw/.jpg')", "url('img/cars/bmw/3.jpg')"], 
      "Audi": ["url('img/cars/audi/1.jpg')", "url('img/cars/audi/2.jpg')", "url('img/cars/audi/3.jpg')"], 
      "GMC": ["url('img/cars/gmc/1.jpg')", "url('img/cars/gmc/2.jpg')", "url('img/cars/gmc/3.jpg')"] 
    } 
    //ect... 
}; 
var Slider = $("#Slider"); // DIV element 
function Slide(car) { 
    var sLength = bs.url[car].length; // array # of pictures available 
    Slider.css({ 
     "background": bs.url[car][index], // ?? here how do you auto increment & restart cycle 
     "background-position": "center", 
      "background-attachment": "fixed", 
      "background-size": "cover" 
    }); 
    setInterval() // here call Slide & ++ index ? 
} 
$(document).ready(function() { 
    Slide("BMW"); 
}); 

Answer 1

Оператор остаток действительно полезен для упаковки вещей, как ваш index вокруг:

index = (index + 1) % length 

... где length является длиной что вы индексируете (это предполагает индексацию на основе 0).

Так что ваша Slide функция может сделать что-то вдоль этих линий:

function Slide(car) { 
    var urls = bs.url[car]; 
    var index = 0; 

    function run() { 
     Slider.css({ 
      "background": urls[index], 
      "background-position": "center", 
      "background-attachment" : "fixed", 
      "background-size" : "cover" 
     }); 
     index = (index + 1) % urls.length; 
    }  

    run(); 
    setInterval(run, bs.time); 
}