纯js图片轮播
1 <!Doctype html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 6 <title>step4</title> 7 <style type="text/css"> 8 #fader{position:relative;overflow:hidden;height:300px;width:500px} 9 #fader li{position:absolute;left:0;top:0;} 10 ul,li{list-style:none;margin:0;padding:0} 11 img{display:block;} 12 .fader-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#333;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;} 13 .fader-cur-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#ff7a00;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;} 14 </style> 15 <script type="text/javascript"> 16 <!-- 17 var Hongru={}; 18 function H$(id){return document.getElementById(id)} 19 function H$$(c,p){return p.getElementsByTagName(c)} 20 Hongru.fader = function(){ 21 function init(anthor,options){this.anchor=anthor; this.init(options);} 22 init.prototype = { 23 init:function(options){ //options参数：id（必选）：图片列表父标签id；auto（可选）：自动运行时间；index（可选）：开始的运行的图片序号 24 var wp = H$(options.id), // 获取图片列表父元素 25 ul = H$$('ul',wp)[0], // 获取 26 li = this.li = H$$('li',ul); 27 this.a = options.auto?options.auto:2; //自动运行间隔 28 this.index = options.position?options.position:0; //开始运行的图片序号（从0开始） 29 this.curC = options.curNavClass?options.curNavClass:'fader-cur-nav'; 30 this.l = li.length; 31 this.cur = this.z = 0; //当前显示的图片序号&&z-index变量 32 nav_wp = document.createElement('div'); //先建一个div作为控制器父标签，你也可以用<ul>或<ol>来做，语义可能会更好，这里我就不改了 33 nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;'; //为它设置样式 34 /* -- 显示备注 --*/ 35 var alt = this.alt = document.createElement('p'); //添加一个p标签，用于显示文本 36 this.img = []; 37 for(var k=0;k<this.l;k++){ 38 this.img.push(H$$('img',this.li[k])[0]); //提取轮播模块里的图片，目的是取alt 39 } 40 /* ==加入淡入淡出功能 ==*/ 41 for(var i=0;i<this.l;i++){ 42 this.li[i].o = 100; //为每一个图片都设置一个透明度变化量 43 this.li[i].style.opacity = this.li[i].o/100; //非IE用opacity即可 44 this.li[i].style.filter = 'alpha(opacity='+this.li[i].o+')'; //IE用滤镜 45 /* == 绘制控制器 == */ 46 var nav = document.createElement('a'); //这里我就直接用a标签来做控制器，考虑语义的话你也可以用li 47 nav.className = options.navClass?options.navClass:'fader-nav'; //控制器class，默认为'fader-nav' 48 nav.innerHTML = i+1; 49 nav.onclick = new Function(this.anchor+'.pos('+i+')'); //绑定onclick事件，直接调用之前写好的pos()函数 50 nav_wp.appendChild(nav); 51 } 52 wp.appendChild(alt); // 53 wp.appendChild(nav_wp); //控制器append到页面 54 this.textH = nav_wp.offsetHeight; 55 alt.style.cssText = 'height:'+this.textH+'px;line-height:'+this.textH+'px;color:#fff;font-size:12px;padding-left:20px;margin:0;position:absolute;left:0;bottom:0;overflow:hidden;width:100%;background:#000;opacity:0.7;filter:alpha(opacity=70);'; //为这个层添加样式 56 this.pos(this.index); //变换函数 57 }, 58 auto:function(){ 59 this.li.a = setInterval(new Function(this.anchor+'.move(1)'),this.a*1000); 60 }, 61 move:function(i){//参数i有两种选择，1和-1,1代表运行到下一张，-1代表运行到上一张 62 var n = this.cur+i; 63 var m = i==1?n==this.l?0:n:n<0?this.l-1:n; //下一张或上一张的序号（注意三元选择符的运用） 64 this.pos(m); //变换到上一张或下一张 65 }, 66 pos:function(i){ 67 clearInterval(this.li.a); //清除自动变换计时器 68 clearInterval(this.li[i].f); //清除淡入淡出效果计时器 69 this.z++; 70 this.li[i].style.zIndex = this.z; //每次让下一张图片z-index加一 71 this.alt.style.zIndex = this.z+1; 72 nav_wp.style.zIndex = this.z+2; 73 this.cur = i; //绑定当前显示图片的正确序号 74 this.li.a = false; //做一个标记，下面要用到，表示清除计时器已经完成 75 //this.auto(); //自动运行 76 if(this.li[i].o>=100){ //在图片淡入之前先把图片透明度置为透明 77 this.li[i].o = 0; 78 this.li[i].style.opacity = 0; 79 this.li[i].style.filter = 'alpha(opacity=0)'; 80 this.alt.style.height = 0; //做备注层的滑动效果 81 } 82 this.alt.innerHTML = this.img[i].alt; //植入alt文本 83 for(var x=0;x<this.l;x++){ 84 nav_wp.getElementsByTagName('a')[x].className = x==i?this.curC:'fader-nav'; //绑定当前控制器样式 85 } 86 this.li[i].f = setInterval(new Function(this.anchor+'.fade('+i+')'),20); 87 }, 88 fade:function(i){ 89 if(this.li[i].o>=100){ 90 clearInterval(this.li[i].f); //如果透明度变化完毕，清除计时器 91 if(!this.li.a){ //确保所有计时器都清除掉之后再开始自动运行。要不然会导致有控制器时点击过快的话，计时器没来得及清除就开始下一次变化，功能就乱了 92 this.auto(); 93 } 94 } 95 else{ 96 this.li[i].o+=5; 97 this.li[i].style.opacity = this.li[i].o/100; 98 this.li[i].style.filter = 'alpha(opacity='+this.li[i].o+')'; 99 this.alt.style.height = Math.ceil(this.li[i].o*this.textH/100)+'px'; //做文字滑动效果 100 } 101 } 102 } 103 return {init:init} 104 }(); 105 // --> 106 </script> 107 </head> 108 109 <body> 110 <div id="fader"> 111 <ul> 112 <li> 113 <img src="http://files.jb51.net/upload/201010/20101011221558299.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221558299.jpg" alt="我是图片一" /> 114 </li> 115 <li> 116 <img src="http://files.jb51.net/upload/201010/20101011221558112.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221558112.jpg" alt="哈哈，图片二" /> 117 </li> 118 <li> 119 <img src="http://files.jb51.net/upload/201010/20101011221558758.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221558758.jpg" alt="这是图片三" /> 120 </li> 121 <li> 122 <img src="http://files.jb51.net/upload/201010/20101011221558158.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221558158.jpg" alt="哈哈，图片四" /> 123 </li> 124 <li> 125 <img src="http://files.jb51.net/upload/201010/20101011221558834.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221558834.jpg" alt="图片五来咯" /> 126 </li> 127 </ul> 128 </div> 129 <script type="text/javascript"> 130 <!-- 131 var fader = new Hongru.fader.init('fader',{ 132 id:'fader' 133 }); 134 // --> 135 </script> 136 </body> 137 138 </html>
本文转自：http://www.jb51.net/article/24950.htm
浙公网安备 33010602011771号