如何使用jQuery和图像数组更改#header的css属性? [英] How to change the css attribute of #header using jQuery and an array of images?
本文介绍了如何使用jQuery和图像数组更改#header的css属性?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试编辑一个更改div图像的脚本,如下所示,以更改#header的background-image属性。
I am trying to edit a script that changes the images of a div as shown below, to change the background-image property of #header.
正如你在我的小提琴中看到的, http: //jsfiddle.net/HsKpq/460/ 我试图将图像显示在$('#header')。css('background-image',..... ................ fadeTo('慢',1);
As you can see in my fiddle here, http://jsfiddle.net/HsKpq/460/ I am trying to show the images into the $('#header').css('background-image',..................).fadeTo('slow',1);
我该怎么办?这个?我想我也必须更改其他部分..
How can I do this? I guess I have to change some 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 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完成回调永远不会被触发(我假设你的意思是淡化div本身)。
- 你需要url('http:// ...')为background-imageCSS属性
- Use a simple increment to keep track of the current image.
- typo: "images" -> "imgs"
- $("img") doesn't select anything, so the JQuery fadeto "complete" callback is never fired (I assume you meant to fade the div itself)
- you need "url('http://...')" for the "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);
});
}
这是更新演示。
这篇关于如何使用jQuery和图像数组更改#header的css属性?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文