This code changes the background every 20 seconds to
How do I insert the fadein and fadeout effect ?
My jQuery code
var bg = $('#bg');
var backgrounds = new Array(
'url(1.jpg)',
'url(2.jpg)',
'url(3.jpg)',
'url(4.jpg)');
var current = 0;
function nextBackground() {
bg.css(
'background',
backgrounds[current = ++current % backgrounds.length]);
setTimeout(nextBackground, 20000);
}
setTimeout(nextBackground, 20000);
bg.css('background', backgrounds[0]);
Tks! I found one solution
Code
var currentBackground = 0;
var backgrounds = [];
backgrounds[0] = '2.jpg';
backgrounds[1] = '3.jpg';
backgrounds[2] = '4.jpg';
backgrounds[3] = '5.jpg';
backgrounds[4] = '6.jpg';
function changeBackground() {
currentBackground++;
if(currentBackground > 4) currentBackground = 0;
$('#bg').fadeOut(500,function() {
$('#bg').css({
'background-image' : "url('" + backgrounds[currentBackground] + "')"
});
$('#bg').fadeIn(500);
});
setTimeout(changeBackground, 30000);
}
$(document).ready(function() {
setTimeout(changeBackground, 30000);
});
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.