需要jQuery改变DIV中的我的背景图像

Question

I`m starting level in jquery , but i have the concept of my idea , i have a #SlidShow div , all i need to change the css property ( background-image ) every 3 second , i have i think 4 image , so my concept is (( Make New Array with images link )) and change the .css( background-image ) of this div with this array every 3s ..

i hope that my concept be right :) , can any one help me with that

#('SlideShow').css('background-image', (Array /* Cant handle it */));

Answer 1

var array = ['url(a.png)', 'url(b.png)', 'url(c.png)', 'url(d.png)'];

var i = 0;
function setBackgroundImage() {
    $('#SlideShow').css('background-image', array[i]);
    i = i % array.length;
}
setBackgroundImage();
setInterval(setBackgroundImage, 3000);

Answer 2

You already got your answer. Just wanted to add that jQuery is a bit overkill if this is all you want to do, but it's probably not.

Here is a pure javascript solution:

http://jsfiddle.net/2BQV5/2/

var arr = ['http://placekitten.com/200/300','http://placekitten.com/200/301','http://placekitten.com/200/302'];

window.onload = function ()
{
    index = 0;
    var c = document.getElementById('cat');
    setInterval(function() {
        if(index > arr.length-1) {index = 0}
        c.style.backgroundImage='url(' + arr[index++] + ')';
    }, 3000);
}

Have fun!

Edit

However for the second request in the comments, to have to pictures fade, jQuery is probably more suited.

Here is one way to achieve the fading effect:

http://jsfiddle.net/8jWT5/

var arr = ['http://placekitten.com/200/300','http://placekitten.com/200/301','http://placekitten.com/200/302'];

$(document).ready(function() {
    var c = $('#cat');
    fade = document.createElement('div');
    $(fade).attr('style','position: absolute; width:' + c.width() + 'px; height:' + c.height() + 'px;').attr('id','fade').hide();
    c.append(fade);

    var index = 0;
    setInterval(function () {
        $('#fade').css('background-image', 'url(' + arr[index] + ')').fadeIn(500,function() {
            c.css('background-image', 'url(' + arr[index++] + ')');        
            if(index > arr.length-1) {index = 0}
            $(this).hide();
        });
    }, 3000);
});