平缓的banner图片切换效果

平时所写的banner图片滚动效果要么是从左至右滚动，要么是从右至左滚动。这种效果利用的原理是banner图的父盒子绝对定位，每隔一段时间移动父盒子的位置，如left=“”；

而现在很多网站开始使用的是图片没有位移的切换效果，一般都是使图片绝对定位，给当前要显示的图片设置z-index的值。但传统的使用fadeIn或者fadeOut会出现扎眼的情况。这次经理要求使用更平缓的效果，所以想到了css3里面特有的animation属性，并且给出平缓的过渡动画。

  css样式

js

html内容

 *{ 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/