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 div
s. Now I want to add content in other div
s so I need to edit that jQuery
somehow to only loop through the div
s 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
});
};
i have changed to search only children with class '.bckgnd'.
var allDivs = visibleDiv.parent().children('.bckgnd'); //all divs to fade out / in
Use below code
in the below code i have images array, place ur image name there , i will pick the background image randomly and it will display there
in the below code i use the background dom name as "background_image" , u can change the dom name as per your requirement
$(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)] + ')'});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.