html实现背景图片自动更换,js+css3实现背景大图自动渐变切换

青岛星网开发会员登录注册页面的时候，想实现页面大背景自动渐变切换，不想引用JQ因为太大，就用JS+CSS3用很少的代码实现了一个，下面跟大家分享代码。

页面放背景图片的HTML代码

这是2个背景图片切换，如果你想用3个或4个图片切换，增加里面的div即可，把ID=bg+数，递增即可。当然CSS里面也要相应的写上图片哦。

CSS部分代码.bg{position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transition:opacity 2s linear;-moz-transition:opacity 2s linear;-o-transition:opacity 2s linear;transition:opacity 2s linear;opacity:0}

#bg1{background:url(img/1.jpg) no-repeat;background-size:cover}

#bg2{background:url(img/2.jpg) no-repeat;background-size:cover}

.fadein{opacity:100;filter:alpha(opacity=100)}

如果前面HTML增加了图片，记得在这里添加相应的图片背景哦。

JS部分实现代码// 替换class达到淡入淡出的效果

function fadeIn(e) {

e.className = "bg fadein"

};

function fadeOut(e) {

e.className = "bg"

};

//申明图片数组中当前的轮播