更改背景图像div

时间:2014-11-04 05:24:22

标签: jquery html css fade indefinite

我想设计一个页面,背景图像以循环方式无限期地改变。现在我有一些有用的东西,但只有当该页面上没有其他<div>循环遍历所有div时。现在我想在其他div中添加内容,因此我需要以某种方式编辑jQuery以仅在其类名称中使用“backgnd”循环遍历div。我该怎么做呢?我的示例链接:http://jsfiddle.net/bbqunfhu/26/ 功能编辑:

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

2 个答案:

答案 0 :(得分:3)

我已更改为只搜索有班级&#39; .bckgnd&#39;的孩子。

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

here

答案 1 :(得分:1)

使用以下代码

在下面的代码我有图像数组,在那里放置你的图像名称,我将随机选择背景图像,它将显示在那里

在下面的代码中我使用背景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)] + ')'});

});