jquery - Changing background image div

Question

I would like to design a page on which the back ground image changes in a round-robin fashion, indefinitely. Now I have something that works but only if there's no other <div>s on that page as it loops through all the divs. Now I want to add content in other divs so I need to edit that jQuery somehow to only loop through the divs with "backgnd" in their class name. How do I do this? My example link: http://jsfiddle.net/bbqunfhu/26/ function to edit:

function fadeDivs() {
var visibleDiv = $('.bckgnd:visible:first'); //find first visible div
visibleDiv.fadeOut(400, function () {  //fade out first visible div
   var allDivs = visibleDiv.parent().children(); //all divs to fade out / in
   var nextDivIndex = (allDivs.index(visibleDiv) + 1) % allDivs.length;  //index of next div that comes after visible div
   var nextdiv = allDivs.eq(nextDivIndex); //find the next visible div
   nextdiv.fadeIn(400); //fade it in
});
};

Answer 1

我已更改为仅搜索“.bckgnd”类的孩子。

var allDivs = visibleDiv.parent().children('.bckgnd'); //all divs to fade out / in

这里

Answer 2

使用下面的代码

在下面的代码中，我有图像数组，把你的图像名称放在那里，我会随机选择背景图像，它会显示在那里

在下面的代码中，我使用背景 dom 名称作为“background_image”，您可以根据您的要求更改 dom 名称

$(function() {

var images = ['img_login_bknd3.jpg', 'img_login_bknd2.jpg', 'img_login_bknd1.jpg', 'img_login_bknd4.jpg', 'img_login_bknd5.jpg', 'img_login_bknd6.jpg','img_login_bknd7.jpg', 'img_login_bknd8.jpg'];

$('#background_image').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});

});