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

之前我们见过的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

需要的朋友可以看看

 

转载于:https://www.cnblogs.com/dujunyanyyy/p/3734284.html