网上的淡入淡出效果大多是依照jquery中fadeIn和fadeOut的方法使用js来控制元素的透明度达到目的,但缺点是有轻微的卡顿感,并且运行效率一般。 这里提供另外一个思路,即通过预先定义好的css样式控制图片透明度的过渡, 这种方法过渡平滑,过渡的效果基于css3的animation,所以效率高些。 思路是将淡入,淡出的效果做成预先定义好的样式类,然后用JS改变元素的类来达到图片轮播。(注意:因为是基于CSS3的animation,在移动端做的兼容性测试表现不错,桌面端暂时没有发现太大的问题。但IE对于css的background支持不太好,外链图片有时会有问题。)
基于CSS3淡入淡出效果的图片自动轮播DEMO
关键点在于fadeIn和fadeOut之间的透明度切换:
/* 轮播图片默认的样式*/.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;filter:alpha(opacity=0);} .fadein{opacity:100;filter:alpha(opacity=100);}
PS:轮播图片默认透明度为0,设置一个opacity=100名为fadein的类使用JS控制其与默认透明度的切换,本篇博客的轮播方法是自动的一张张切换,并无交互性, 使用触控左右滑动图片的轮播请猛戳俺的另一篇博客:原生JS实现滑动图片轮播
而JS方面则是通过获取imgs数组,轮播其中存放图片的div, 方法是控制图片div的class。
废话不多说,上代码:
HTML(后插入的图片显示在前):
<div id="imgs"><div id="bg1" class="bg"></div><div id="bg2" class="bg"></div></div>
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(/7b57a678c8999dbas.jpg) no-repeat;background-size: cover;}#bg2 {background: url(/1182f22573e6051fs.jpg) no-repeat;background-size: cover;}.fadein {opacity: 100;filter: alpha(opacity=100);}
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);
demo中只用了两张图片,如果需要插入更多的图片,可以在id=“imgs”的div中加入一个新的子div ,class加上bg即可,然后在CSS中加入该div的描述,比如HTML中加入<div id="bg3" class="bg"></div>
,然后CSS中则加入
#bg3 {background: url(图片地址) no-repeat;background-size: cover;}
即可。