javascript - How to change the css attribute of #header using jQuery and an array of images? -
i trying edit script changes images of div shown below, change background-image property of #header.
as can see in fiddle here, http://jsfiddle.net/hskpq/460/ trying show images $('#header').css('background-image',..................).fadeto('slow',1);
how can this? guess have change other parts too..
var img = 0; var imgs = [ 'http://www.istockphoto.com/file_thumbview_approve/9958532/2/istockphoto_9958532-sun-and-clouds.jpg', 'http://www.istockphoto.com/file_thumbview_approve/4629609/2/istockphoto_4629609-green-field.jpg', 'http://www.istockphoto.com/file_thumbview_approve/9712604/2/istockphoto_9712604-spring-sunset.jpg' ]; // preload images $.each(imgs,function(i,e){var i=new image();i.src=e;}); // populate image first entry $('img').attr('src',imgs[0]); var opacity = 0.1; // change minimum opacity function changebg() { $('img').fadeto('slow',opacity,function(){ $('#header').css('background-image',..................).fadeto('slow',1); }); } setinterval(changebg,5000);
you need couple of fixes:
- use simple increment keep track of current image.
- typo: "images" -> "imgs"
- $("img") doesn't select anything, jquery fadeto "complete" callback never fired (i assume meant fade div itself)
- you need "url('http://...')" "background-image" css property
function changebg() { if (i >= imgs.length) i=0; $('#header').fadeto('slow',opacity,function(){ var val = "url('" + imgs[i++] + "')"; console.log(val); $('#header').css('background-image',val).fadeto('slow',1); }); }
here updated demo.
Comments
Post a Comment