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"
};
//申明图⽚数组中当前的轮播图⽚
cur_img = ElementById("imgs").children.length - 1;
/
/图⽚轮播函数
function turnImgs(imgs) {
var imgs = ElementById("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--;
}
javascript登录注册界面
}
//设置轮播间隔
setInterval(turnImgs,3000);
⾄此已经实现了⼤背景⾃动切换渐变。
缺点：⽤于使⽤了CSS3，导致低版本的IE浏览器不⽀持。
如果想兼容所有浏览器可以使⽤JQ来编写，⼤家可以参考：Jquery实现⽀付宝⾸页背景图⽚切换 这个是我照着⽀付宝的⾸页切换扒下来的，可以兼容所有浏览器，只是JQ插件太⼤，我选择了本⽂介绍简易⽅法实现。
喜欢简单的可以⽤我这个⽅法，喜欢兼容全部的就⽤前⾯JQ的实现⽅式，都是⼀样的效果哦。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。