如何使用jQuery和图像数组更改#header的css属性？

我正在尝试编辑一个更改div图像的脚本，如下所示，以更改#header的background-image属性。

你可以在这里看到我的小提琴， http：//jsfiddle.net/HsKpq/460/我试图将images into the $('#header').css('background-image',..................).fadeTo('slow',1);显示images into the $('#header').css('background-image',..................).fadeTo('slow',1);

我怎样才能做到这一点？ 我想我也要换一些其他部分..

 var img = 0; var imgs = [ 'http://sofzh.miximages.com/javascript/istockphoto_9958532-sun-and-clouds.jpg', 'http://sofzh.miximages.com/javascript/istockphoto_4629609-green-field.jpg', 'http://sofzh.miximages.com/javascript/istockphoto_9712604-spring-sunset.jpg' ]; // preload images $.each(imgs,function(i,e){var i=new Image();i.src=e;}); // populate the image with first entry $('img').attr('src',imgs[0]); var opacity = 0.1; // change this for minimum opacity function changeBg() { $('img').fadeTo('slow',opacity,function(){ $('#header').css('background-image',..................).fadeTo('slow',1); }); } setInterval(changeBg,5000); 

Answer 1

你需要一些修复：

• 使用简单的增量来跟踪当前图像。
• 拼写错误：“images” – >“imgs”
• $（“img”）没有选择任何东西，所以JQuery fadeto“完成”回调永远不会被触发（我假设你的意思是淡化div本身）
• 你需要“url（’http：// …’）”作为“background-image”CSS属性

---

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

这是更新的演示 。