如何使用jQuery和图像数组改变#header的css属性
How to change the css attribute of #header using jQuery and an array of images?
我试图编辑一个脚本,改变一个div的图像如下所示,以改变#header的背景图像属性。
正如你在我的小提琴中看到的,http://jsfiddle.net/HsKpq/460/我试图显示images into the $('#header').css('background-image',..................).fadeTo('slow',1);
我该怎么做?我想我也必须改变一些其他的部分。
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 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);
您需要几个修复:
- 使用简单的增量来跟踪当前图像。
- 打字错误:"images" -> "imgs"
- $("img")不选择任何东西,所以JQuery的fadeto "complete"回调永远不会被触发(我假设你的意思是淡化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);
});
}
相关文章:
- CSS-如何定位内容数据标题
- 窗口大小html css
- 如果文本字段为空,则使用JavaScript应用CSS样式
- 动画.CSS重播
- 有没有一种方法可以防止img get请求使用css或js发生
- CSS表格:从列平移到整个表格宽度
- CKEditor-我在editor.css中的风格是't
- 单击更改图标并通过javascript添加一个css类
- 将CSS应用于printWindow.print();在Javascript中
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- css(或jQuery)悬停时淡入淡出
- 为什么不'在JQuery中找到第二个css选择器的工作
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- 如何使用css动画/javascript使具有背景图像的元素出现
- 获取HTML属性中CSS声明的值
- 用JS把CSS放到header里
- 如何使用jQuery和图像数组改变#header的css属性
- Sticky header CSS / JS
- 使用javascript将css类添加到使用javascript实现的header中