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

之前我们见过的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 }();

需要的朋友可以看看