需要Jquery在DIV中更改我的背景图像

Question

我是jquery的初级，但我有我的想法的概念，我有一个#SlidShow div，我需要每隔3秒更改一次css属性（背景图像），我认为4图像，所以我的概念是（（使用图像链接制作新数组））并每隔3s用这个数组改变这个div的.css（背景图像）..

我希望我的概念是正确的:)，任何人都可以帮助我

#('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

你已经得到了答案。只是想补充一点，如果你想要做的就是jQuery有点矫枉过正，但它可能不是。

这是一个纯粹的JavaScript解决方案：

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);
}

玩得开心！

修改

然而，对于评论中的第二个请求，要使图片淡出，jQuery可能更适合。

这是实现褪色效果的一种方法：

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);
});