背景淡入淡出切换的一点小思路

前端日子朋友让我实现一个功能，页面背景多图片淡入淡出切换，查找百度代码各种复杂，对我这种小白来说有点难易理解，琢磨半天终于有了点思路，特记录下来，本人小白，大牛勿喷。

原理不是特别复杂，首先准备两张图片作为背景。

HTML代码：

<div id="imgbox" class="bgdiv">
		<img src="/images/main_bg3.jpg" /><img src="/images/main_bg2.jpg" />
</div>

CSS代码：

.bgdiv {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -999;
}

.bgdiv img {
	width: 100%;
	height: 100%;
	border: 0px;
	position:absolute;
}

处理这两个图片作为背景图，采用绝对定位，将第二个img标签覆盖到第一个img标签上，造成一个背景的假象，打开网站后实际显示出来的是第二个img，第一个被覆盖显示不出来。

 

上JS代码：

<script type = "text/javascript" > 
    $(function() {
    var bgCounter = 0;
    backg