之前我们见过的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代码比较多,折叠了哈
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 }();
需要的朋友可以看看