很平滑的淡入淡出效果，可以随意换背景(背景图片)，换图片

之前我们见过的banner基本上都是一张图片，但是一组banner中有背景和图片一起切换例子就比较少了。

a.html：

 <script type="text/javascript" src="js/banner.js"></script>

    <div id="fader">

      <ul>

        <li style="background:#4b8ed1;"><div class="am_auto03"><img src="images/am_bigimg01.jpg" /></div></li>

        <li style="background:#000;"><div class="am_auto03"><img src="images/am_img01.jpg" /></div></li>

      </ul>

    </div>

    <script type="text/javascript">

        var fader = new Hongru.fader.init('fader',{

             id:'fader'

        });

   </script> 

b.css

/*banner*/

#fader { width: 100%; height: 450px; margin: 0 auto; overflow: hidden; position: relative;}

#fader li { left: 0; position: absolute; top: 0;}

ul, li { margin: 0; padding: 0;}

#fader li{ background-position: center 0; background-repeat: no-repeat; background-size: cover; width: 100%; height: 450px; left: 0; position: absolute; top: 0;}

#fader li img { height: 450px; width: 808px; overflow:hidden;}

.fader-nav { background-color: #6A6A6A; color: #FFFFFF; cursor: pointer; font-family: Tahoma; font-size: 12px; font-weight: bold; margin-right: 6px; padding: 1px 5px; display:none;}

.fader-cur-nav { background-color: #CD6304; color: #FFFFFF; cursor: pointer; font-family: Tahoma; font-size: 12px; font-weight: bold; height: 21px; margin-right: 6px; padding: 1px 5px;   width: 22px;display:none;}

banner.js代码比较多，折叠了哈

 1 var Hongru={};

 2 function H$(id){return document.getElementById(id)}

 3 function H$$(c,p){return p.getElementsByTagName(c)}

 4 Hongru.fader = function(){

 5   function init(anchor,options){

 6   this.anchor = anchor;

 7   var wp = H$(options.id),

 8    ul = H$$('ul',wp)[0],

 9    li = this.li = H$$('li',ul);

10   this.index = options.position?options.position:0;

11   this.a = options.auto?options.auto:2;

12   this.cur = this.z = 0;

13   this.l = li.length;

14   this.img = [];

15   for(var k=0;k<this.l;k++){

16    this.img.push(H$$('img',this.li[k])[0]);

17   }

18   this.curC = options.curNavClass?options.curNavClass:'fader-cur-nav';

19   nav_wp = document.createElement('div');

20   nav_wp.id = 'fader-nav';

21   nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;width:100%;text-align: right;height:40px;background:url(images/ots_div_bg_03.png) repeat-x left top;';

22   var alt = this.alt = document.createElement('p');

23   for(var i=0;i<this.l;i++){

24    this.li[i].o = 100;

25    //setOpacity(this.li[i],this.li.o);

26    this.li[i].style.opacity = this.li[i].o/100;

27    this.li[i].style.filter = 'alpha(opacity='+this.li[i].o+')';

28    //绘制控制器

29    var nav = document.createElement('a');

30    nav.className = options.navClass?options.navClass:'fader-nav';

31    nav.innerHTML = i+1;

32    nav.onclick = new Function(this.anchor+'.pos('+i+')');

33    nav_wp.appendChild(nav);

34   }

35   wp.appendChild(alt);  

36   wp.appendChild(nav_wp);

37   this.textH = nav_wp.offsetHeight;

38     alt.style.cssText = 'color:#fff;font-size:12px;margin:0;position:absolute;left:0;bottom:0;overflow:hidden;width:100%;opacity:0.7;filter:alpha(opacity=70);';

39     alt.style.height = alt.style.lineHeight = this.textH+'px';

40   this.pos(this.index);

41  }

42  init.prototype={

43   auto:function(){

44    this.li.a = setInterval(new Function(this.anchor+'.move(1)'),this.a*2500); 

45   },

46   move:function(i){

47    var n = this.cur+i;

48    var m = i==1?n==this.l?0:n:n<0?this.l-1:n;

49    this.pos(m);

50   },

51   pos:function(i){

52    clearInterval(this.li.a);

53    clearInterval(this.li[i].f);

54    var curLi = this.li[i];

55    this.z++;

56    curLi.style.zIndex = this.z;

57    this.alt.style.zIndex = this.z+1;

58    nav_wp.style.zIndex = this.z+2;

59    this.li.a=false;//这句话是必要的

60    this.cur = i;

61    //setOpacity(curLi[i],0);

62    if(this.li[i].o>=100){

63     this.li[i].o = 0;

64     curLi.style.opacity = 0;

65     curLi.style.filter = 'alpha(opacity=0)';

66     this.alt.style.height = '0px';

67    }

68    for(var x=0;x<this.l;x++){

69     nav_wp.getElementsByTagName('a')[x].className = x==i?this.curC:'fader-nav';

70     }

71    this.alt.innerHTML = this.img[i].alt;

72    this.li[i].f = setInterval(new Function(this.anchor+'.fade('+i+')'),20);

73   },

74   fade:function(i){

75   var p=this.li[i];

76    if(p.o>=100){

77     clearInterval(p.f);

78     if(!this.li.a){//一定要在这里做个是否已经clearInterval的判断，要不然在快速点击的时候会导致图片不停地闪

79      this.auto();

80     }

81    }

82    else{

83     p.o+=5;

84     //setOpacity(this.li[i],this.li[i].o);

85     p.style.opacity = p.o/100;

86     p.style.filter = 'alpha(opacity='+p.o+')';

87     this.alt.style.height = Math.ceil(p.o*this.textH/100)+'px';

88    }

89   }

90  };

91  return {init:init};

92 }();

View Code

需要的朋友可以看看