精美而实用的网站，关注web编程技术、网站运营、SEO推广，让您轻松愉快的学习

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

页面放背景图片的HTML代码

<div id="imgs">
 <div id="bg1" class="bg"></div>
 <div id="bg2" class="bg fadein"></div>
</div>

这是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"
};
//申明图片数组中当前的轮播图片
cur_img = document.getElementById("imgs").children.length - 1;
//图片轮播函数
function turnImgs(imgs) {
 
 
    var imgs = document.getElementById("imgs").children;
    if (cur_img == 0) {
      fadeOut(imgs[cur_img]);
      cur_img = imgs.length - 1;
      fadeIn(imgs[cur_img]);
    } else {
      fadeOut(imgs[cur_img]);
      fadeIn(imgs[cur_img - 1]);
      cur_img--;
    }
  }
  //设置轮播间隔
setInterval(turnImgs,3000);

至此已经实现了大背景自动切换渐变。

缺点：用于使用了CSS3，导致低版本的IE浏览器不支持。

如果想兼容所有浏览器可以使用JQ来编写，大家可以参考：Jquery实现支付宝首页背景图片切换 这个是我照着支付宝的首页切换扒下来的，可以兼容所有浏览器，只是JQ插件太大，我选择了本文介绍简易方法实现。

实际项目应用参考地址：http://www.qdxw.net/member/login.html 大家看看 大背景自动切换，是不是很酷哦。

喜欢简单的可以用我这个方法，喜欢兼容全部的就用前面JQ的实现方式，都是一样的效果哦。

Tags：js css3 渐变