div背景图片切换淡入淡出效果

jq部分:

<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
var currentIndex = 0;

function changeBg(){

//定义要切换的背景图片，双引号里面，可以放任意多个

var bgImgs = ["0.jpg","1.jpg","2.jpg"];

$('#main1').fadeTo('slow', 0.3, function()
{
if (currentIndex >= bgImgs.length)
currentIndex = 0;

$(this).css('background-image', 'url(images/' + bgImgs[currentIndex] + ')');
}).fadeTo('slow', 1);

currentIndex += 1;
}
setInterval("changeBg()", 5000); //设定定时切换，单位为毫秒，比如：30分钟=1800秒=1800000毫秒
</script>

 

css部分：

body{font-size:12px; margin:0; padding:0; overflow:hidden; }

#main1{width:1280px; height:912px;}

 

html部分：

<body>

<div  id="main1"  style="background:url(images/0.jpg)"></div>

</body>

posted @ 2014-12-24 16:54  冰冰_六月  阅读(2462)  评论(0)    收藏  举报