一步一步教你写淡入淡出带注释的图片轮播插件（二）_javascript技巧
接上一篇，现在进行第二部分。
开始之前，还是说说前文提到的关于把所有函数都写在一个闭包内的优化问题。前文也提到了，因为我们在初始化的时候要调用的只是init，所以可以只把init写入闭包，其他功能函数作为init的原型继承方法来调用。所以前文的代码其实可以这样改写：
var Hongru={};
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c)}
Hongru.fader = function(){
function init(options){ //options参数：id（必选）：图片列表父标签id；auto（可选）：自动运行时间；index（可选）：开始的运行的图片序号
var wp = H$(options.id), // 获取图片列表父元素
ul = H$$('ul',wp)[0], // 获取
li = this.li = H$$('li',ul);
this.a = options.auto?options.auto:2; //自动运行间隔
this.index = options.position?options.position:0; //开始运行的图片序号（从0开始）
this.l = li.length;
this.cur = this.z = 0; //当前显示的图片序号&&z-index变量
this.pos(this.index); //变换函数
}
init.prototype = {
auto:function(){
this.li.a = setInterval(new Function('Hongru.fader.move(1)'),this.a*1000);
},
move:function(i){//参数i有两种选择，1和-1,1代表运行到下一张，-1代表运行到上一张
var n = this.cur+i;
var m = i==1?n==this.l?0:n:nthis.pos(m); //变换到上一张或下一张
},
pos:function(i){
clearInterval(this.li.a);
this.z++;
this.li[i].style.zIndex = this.z; //每次让下一张图片z-index加一
this.cur = i; //绑定当前显示图片的正确序号
this.auto(); //自动运行
}
}
return {init:init}
}();
但是这样其实是有问题的，不知道大家发现没有，如果这样改写的话，在auto函数里就不能再调用‘Hongru.fader.move()'了，这是没定义的，那有人会说，既然是init的原型继承，那就调用'Hongru.fader.init.move()'不就对了吗？其实也不对，我在以前的文章中就讨论过这个问题http://www.cnblogs.com/hongru/archive/2010/10/09/1846636.html;init在没有实例化之前是访问不到它的prototype的，所以我们在这样做的时候要注意两个问题，
一个是初始化的时候要用new关键字对init实例化。
另外一个是在代码内部调用它的原型方法时也要通过我们实例化后的对象来调用，举个例子，比如我们对上面的代码初始化的时候应该是这样的
var newFader = new Hongru.fader.init({ //这个new很重要
id:'fader'
});
如果我们在代码里要调用init的方法要通过我们新建的实例化对象newFader来调用，比如在上面的auto函数里要调用init的move方法的话，就直接调用'newFader.move()'，这样才行。
可是这样还有个小问题，就是必须要保证实例化的变量名和代码中调用的一致，那么如果我改了我的初始化对象的名字，比如用newFader1,那么我还得去改源码，这样肯定是不行的，所以有个小技巧，就是在init里面多传一个参数，自己在做初始化的时候让变量名和参数一致，然后在源码里我们通过参数来调用。这样问题就圆满的解决了。
（ps：代码里之所以使用new Function的原因也是因为这样能冲破作用域链，这也是保证我们能这样架构我们代码的条件之一。）
综上：之前的代码应该这样优化：
var Hongru={};
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c)}
Hongru.fader = function(){
function init(anthor,options){this.anthor=anthor; this.init(options);}
init.prototype = {
init:function(options){ //options参数：id（必选）：图片列表父标签id；auto（可选）：自动运行时间；index（可选）：开始的运行的图片序号
var wp = H$(options.id), // 获取图片列表父元素
ul = H$$('ul',wp)[0], // 获取
li = this.li = H$$('li',ul);
this.a = options.auto?options.auto:2; //自动运行间隔
this.index = options.position?options.position:0; //开始运行的图片序号（从0开始）
this.l = li.length;
this.cur = this.z = 0; //当前显示的图片序号&&z-index变量
this.pos(this.index); //变换函数
},
auto:function(){
this.li.a = setInterval(new Function(this.anthor+'.move(1)'),this.a*1000);
},
move:function(i){//参数i有两种选择，1和-1,1代表运行到下一张，-1代表运行到上一张
var n = this.cur+i;
var m = i==1?n==this.l?0:n:nthis.pos(m); //变换到上一张或下一张
},
pos:function(i){
clearInterval(this.li.a);
this.z++;
this.li[i].style.zIndex = this.z; //每次让下一张图片z-index加一
this.cur = i; //绑定当前显示图片的正确序号
this.auto(); //自动运行
}
}
return {init:init}
}();
初始化时应该这样：
var fader = new Hongru.fader.init('fader',{ //保证第一个参数和变量名一致
id:'fader'
});
好了，代码的优化方案到此结束。下面是第二部分效果的实现：淡入淡出的效果
其实有了上面良好的代码结构和逻辑的话，加入淡入淡出效果是比较容易的，思路很简单，在变化之前让图片透明，然后通过计时器让透明度渐渐增加。只不过这里面有几个边界的判断是比较重要的。同时透明度改变在ie和非ie下要注意用不同的css属性。
核心代码的改动就下面两段，一个是增加了透明度渐变函数fade()，另一个是在pos()里面事先要先把图片透明-->然后开始执行fade（）
pos（）里增加一个代码段：
if(this.li[i].o>=100){ //在图片淡入之前先把图片透明度置为透明
this.li[i].o = 0;
this.li[i].style.opacity = 0;
this.li[i].style.filter = 'alpha(opacity=0)';
}
this.li[i].f = setInterval(new Function(this.anthor+'.fade('+i+')'),20);
然后加一个功能函数fade()
fade:function(i){
if(this.li[i].o>=100){
clearInterval(this.li[i].f); //如果透明度变化完毕，清除计时器
if(!this.li.a){ //确保所有计时器都清除掉之后再开始自动运行。要不然会导致有控制器时点击过快的话，计时器没来得及清除就开始下一次变化，功能就乱了
this.auto();
}
}
else{ //透明度变化
this.li[i].o+=5;
this.li[i].style.opacity = this.li[i].o/100;
this.li[i].style.filter = 'alpha(opacity='+this.li[i].o+')';
}
}
好了，就这么简单。不过还有一点要记住就是在pos（）调用的最初一定要记得清除上次的计时器！！
下面再把整个的源码都贴一遍吧：
var Hongru={};
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c)}
Hongru.fader = function(){
function init(anthor,options){this.anthor=anthor; this.init(options);}
init.prototype = {
init:function(options){ //options参数：id（必选）：图片列表父标签id；auto（可选）：自动运行时间；index（可选）：开始的运行的图片序号
var wp = H$(options.id), // 获取图片列表父元素
ul = H$$('ul',wp)[0], // 获取
li = this.li = H$$('li',ul);
this.a = options.auto?options.auto:2; //自动运行间隔
this.index = options.position?options.position:0; //开始运行的图片序号（从0开始）
this.l = li.length;
this.cur = this.z = 0; //当前显示的图片序号&&z-index变量
/* ==加入淡入淡出功能 ==*/
for(var i=0;i
this.li[i].style.opacity = this.li[i].o/100; //非IE用opacity即可
this.li[i].style.filter = 'alpha(opacity='+this.li[i].o+')'; //IE用滤镜
}
this.pos(this.index); //变换函数
},
auto:function(){
this.li.a = setInterval(new Function(this.anthor+'.move(1)'),this.a*1000);
},
move:function(i){//参数i有两种选择，1和-1,1代表运行到下一张，-1代表运行到上一张
var n = this.cur+i;
var m = i==1?n==this.l?0:n:nthis.pos(m); //变换到上一张或下一张
},
pos:function(i){
clearInterval(this.li.a); //清除自动变换计时器
clearInterval(this.li[i].f); //清除淡入淡出效果计时器
this.z++;
this.li[i].style.zIndex = this.z; //每次让下一张图片z-index加一
this.cur = i; //绑定当前显示图片的正确序号
this.li.a = false; //做一个标记，下面要用到，表示清除计时器已经完成
//this.auto(); //自动运行
if(this.li[i].o>=100){ //在图片淡入之前先把图片透明度置为透明
this.li[i].o = 0;
this.li[i].style.opacity = 0;
this.li[i].style.filter = 'alpha(opacity=0)';
}
this.li[i].f = setInterval(new Function(this.anthor+'.fade('+i+')'),20);
},
fade:function(i){
if(this.li[i].o>=100){
clearInterval(this.li[i].f); //如果透明度变化完毕，清除计时器
if(!this.li.a){ //确保所有计时器都清除掉之后再开始自动运行。要不然会导致有控制器时点击过快的话，计时器没来得及清除就开始下一次变化，功能就乱了
this.auto();
}
}
else{
this.li[i].o+=5;
this.li[i].style.opacity = this.li[i].o/100;
this.li[i].style.filter = 'alpha(opacity='+this.li[i].o+')';
}
}
}
return {init:init}
}();
大家要注意我写的注释，有些地方是比较关键的。
再看看运行效果吧：
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
可能有人注意到了，这里的淡入淡出只是个头衔，其实只有淡入效果，不过不碍事，效果其实和有淡出基本一样，而且就算要淡出功能也仅仅需要改两句话。呵呵
这一部分到此结束，下一部分会加入控制器。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
使用CSS實現響應式圖片自動輪播效果的教學課程
Nov 21, 2023 am 08:37 AM
隨著行動裝置的普及，網頁設計需要考慮到不同終端的裝置解析度和螢幕尺寸等因素，以實現良好的使用者體驗。在實現網站的響應式設計時，常常需要使用到圖片輪播效果，以展示多張圖片在有限的視覺視窗中的內容，同時也能夠增強網站的視覺效果。本文將介紹如何使用CSS實現響應式圖片自動輪播效果，並提供程式碼範例和解析。實現思路響應式圖片輪播的實現可以透過CSS的flex佈局來實現。在
如何使用 PHP 實現圖片輪播和幻燈片功能
Sep 05, 2023 am 09:57 AM
如何使用PHP實現圖片輪播和幻燈片功能在現代網頁設計中，圖片輪播和幻燈片功能已經變得非常流行。這些功能可以為網頁增添一些動態和吸引力，提升使用者體驗。本文將介紹如何使用PHP實現圖片輪播和投影片功能，幫助讀者掌握這項技術。在HTML中建立基礎結構首先，在HTML檔案中建立基礎結構。假設我們的圖片輪播有一個容器以及幾個圖片元素。 HTML程式碼如下
如何利用PHP開發一個簡單的圖片輪播功能
Sep 25, 2023 am 11:21 AM
如何利用PHP開發一個簡單的圖片輪播功能圖片輪播功能在網頁設計中十分常見，能夠給使用者呈現更好的視覺效果，提升使用者體驗。本文將介紹如何使用PHP開發一個簡單的圖片輪播功能，並給出具體的程式碼範例。首先，我們需要準備一些圖片資源作為輪播的圖片。將這些圖片放在一個資料夾內，並命名為"slider"，確保資料夾路徑正確。接下來，我們需要寫一個PHP腳本來取得這些圖
JavaScript 如何實現圖片的輪播切換效果並加入淡入淡出動畫？
Oct 18, 2023 pm 12:12 PM
JavaScript如何實現圖片的輪播切換效果並加入淡入淡出動畫？圖片輪播是網頁設計中常見的效果之一，透過切換圖片來展示不同的內容，為使用者帶來更好的視覺體驗。在這篇文章中，我將介紹如何使用JavaScript來實現圖片的輪播切換效果，並加入淡入淡出的動畫效果。下面是具體的程式碼範例。首先，我們需要在HTML頁面中建立一個包含輪播圖的容器，並在其中加入
如何使用HTML、CSS和jQuery製作一個動態的圖片輪播
Oct 25, 2023 am 10:09 AM
如何使用HTML、CSS和jQuery製作一個動態的圖片輪播在網站設計和開發中，圖片輪播是一個經常使用的功能，用於展示多張圖片或廣告橫幅。透過HTML、CSS和jQuery的結合，我們可以實現一個動態的圖片輪播效果，為網站增加活力和吸引力。本文將介紹如何使用HTML、CSS和jQuery製作一個簡單的動態圖片輪播，並提供具體的程式碼範例。第一步：設定HTML結
如何透過WordPress外掛實現圖片輪播功能
Sep 06, 2023 pm 12:36 PM
如何透過WordPress外掛實現圖片輪播功能在現今的網站設計中，圖片輪播功能已成為一個常見的需求。它可以讓網站更具吸引力，並且能夠展示多張圖片，達到更好的宣傳效果。在WordPress中，我們可以透過安裝插件來實現圖片輪播功能，本文將介紹一個常見的插件，並提供程式碼範例供參考。一、外掛介紹在WordPress外掛程式庫中，有許多圖片輪播外掛程式可供選擇，其中一款常
如何利用vue和Element-plus實現圖片輪播和幻燈片展示
Jul 18, 2023 am 10:32 AM
如何利用Vue和ElementPlus實現圖片輪播和幻燈片展示在網頁設計中，圖片輪播和幻燈片展示是常見的功能需求。而使用Vue和ElementPlus框架可以輕鬆實現這些功能。本文將介紹如何使用Vue和ElementPlus來創建一個簡單而美觀的圖片輪播和幻燈片展示組件。首先，我們要先安裝Vue和ElementPlus。在命令列中執行以下命令：
JavaScript 如何實現圖片的上下滑動切換效果同時加入縮放和淡入淡出動畫？
Oct 20, 2023 pm 05:15 PM
JavaScript如何實現圖片的上下滑動切換效果同時加入縮放和淡入淡出動畫？在網頁設計中，常常會用到圖片的切換效果來提升使用者體驗。而在這些切換效果中，上下滑動、縮放和淡入淡出動畫是比較常見且具吸引力的。本文將介紹如何使用JavaScript實現這三種動畫效果的組合。首先，我們需要用HTML來建構一個基本的網頁結構，其中包含要顯示的圖片元素。以下是一個示
