需要jquery chaning我的背景圖像在DIV

我是jquery的起始級別，但我有我的想法的概念，我有一個#SlidShow div，我需要每次更改css屬性（背景圖像） 3秒鐘，我有我認爲4圖像，所以我的概念是（（使圖像鏈接新的數組鏈接）），並更改每隔3秒這個數組的這個div的.css（背景圖像）。需要jquery chaning我的背景圖像在DIV

我希望我的理念是正確的:)，任何一個可以幫助我與

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

來源

2013-12-12 Mohamed Samy

你已經得到了你的答案。只是想補充一點，如果這是你想要做的，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); 
});

來源

2013-12-12 08:04:54

你可以添加淡入效果請:)謝謝它的作品 –

如果你想圖片淡入淡出，jQuery可能更適合。編輯我的答案與解決方案。 –

它解決了你的問題嗎？如果是這樣，請接受答案:) –

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

來源

2013-12-12 07:37:55

我事情其缺失（URL）的陣列字後面> ??? –

@MohamedSamy，謝謝。編輯。 –

需要jquery chaning我的背景圖像在DIV

回答

相關問題