平时所写的banner图片滚动效果要么是从左至右滚动,要么是从右至左滚动。这种效果利用的原理是banner图的父盒子绝对定位,每隔一段时间移动父盒子的位置,如left=“”;
而现在很多网站开始使用的是图片没有位移的切换效果,一般都是使图片绝对定位,给当前要显示的图片设置z-index的值。但传统的使用fadeIn或者fadeOut会出现扎眼的情况。这次经理要求使用更平缓的效果,所以想到了css3里面特有的animation属性,并且给出平缓的过渡动画。
*{ margin:0; padding:0;}
.banner { width:100%; margin:0; padding:0; position:absolute;}
.banner img { width:100%; height:100%; position:absolute; left:0; top:0;}
.current { z-index:2; -moz-animation:show 1s; -ms-animation:show 1s; -o-animation:show 1s; -webkit-animation:show 1s;}
@-webkit-keyframes show{
from{opacity:0;}
to{opacity:1;}
}
@-o-keyframes show{
from{opacity:0;}
to{opacity:1;}
}
@-moz-keyframes show{
from{opacity:0;}
to{opacity:1;}
}
@-ms-keyframes show{
from{opacity:0;}
to{opacity:1;}
}
$(function(){
var height = screen.height;
$('.banner').css('height',height);
var num=0;
function show(){
//父盒子fadeIn,内的子元素按照一张张切换。
if(num>2){
num=0;
//$('.banner').stop().fadeIn(1000).css('z-index','1');
$('.banner img').eq(num).addClass('current').siblings().removeClass('current');
}else{
num++;
//$('.banner').stop().fadeIn(1000).css('z-index','1');
$('.banner img').eq(num).addClass('current').siblings().removeClass('current');
}
}
setInterval(function(){
show();
},4000);
})
原理:图片都是定位,每四秒钟切换一次图片。图片切换时如果使用fadeIn()方法时,会出现图片显白。所以想要图片切换时更加平滑,可以在css里面去设置图片的动画,使用animation方法,会更平缓。代码如上所示。
使用这个方法的网站:http://zanadu.cn/