純js 圖片輪播（轉）

時間 2019-11-12
原文原文鏈接
  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.htmjavascript
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。