前几天在blueIdea上看到一个淡入淡出的带注释的图片轮播效果http://bbs.blueidea.com/thread-2911266-1-1.html看了帖子作者的代码，虽然效果达到了，但是有几个地方本人有不同的看法：
1.那位作者的思路是隐藏掉真正的图片列表，而新建一个div，通过不断push当前图片到那个div的innerHTML里的方式来做一个一个交替变化。思路虽然有些新意，但是从目标效果的运行逻辑来看，通过改变列表元素的z-index值来实现交替变换其实更符合这个效果逻辑的初衷。
2.那位作者虽然对代码做了一定程度的封装，但封装的还是不很好，在效果的可配置上做的不很好，于是乎，这只能是一个效果，而不能作为一个可配置的插件。
（ps：以上观点纯属就事论事，无任何怀疑此作者功力的意思。且不同人有不同看法。纯属个人观点）
所以，我自己也抽空写了个类似的效果，做了一定程度的封装，虽然也只能勉强算个轻量级原生小插件吧，但还是分享出来，并做一步一步的教程，希望能给有需要的朋友一些帮助吧。先上个最终的效果图吧：
好了，Let's go！开始我们的第一部分吧！
第一部分我们要达到的目标有：
1.建立一个大的框架，实现变换的逻辑，同时建立良好的代码结构，为以后的功能扩展打好基础。（好的开始是成功的一半！）
2.第一部分要实现的效果为图片自动切换（仅仅是这一个功能）。
首先要有清晰地思路，要实现这一个效果，我们一定是调用一个初始化函数init()-->init()中开始变换第一张图片到下一张，不妨暂定这个功能函数为pos()-->要实现自动交替变换，那么肯定需要一个自动变换的功能函数auto()-->auto()中自动变换应该有两个方向，向前和向后，那么这个功能我们也可以通过一个函数来实现，暂定move()-->move()中是指定向上或向下一张变换，那么就可以回归到我们的变换函数pos()中！
那么，我们就建立了一套完整可行的逻辑体系。根据以上逻辑，我们用代码结构来表示如下：
复制代码 代码如下:
var Hongru={};
Hongru.fader = function(){
return{
init:function(options){ //options参数：id（必选）：图片列表父标签id；auto（可选）：自动运行时间；index（可选）：开始的运行的图片序号
this.pos(this.index); //变换函数
},
auto:function(){
setInterval(new Function('Hongru.fader.move(1)'),this.a*1000);
},
move:function(i){//参数i有两种选择，1和-1,1代表运行到下一张，-1代表运行到上一张
this.pos(m); //变换到上一张或下一张
},
pos:function(i){
this.auto(); //自动运行
}
}
}();
以上只是我个人的编码习惯：把功能块都写在一个闭包里，减少命名冲突，避免全局变量污染。（但是这样会有个问题，所有函数都在闭包里，很可能会导致ie内存泄露，所以还有另外种更好的方式：只把初始化函数写入闭包，其他功能通过原型内建。这样同样可以避免命名冲突和全局变量污染，又同时减轻了内存压力。这个优化方案将在下一部分一起说明）
好了，大的框架出来了，我们其实就成功了一半了，以下再根据每个模块具体的功能充实函数。由于dom选择器使我们最常使用的功能，所以这里预先定义了两个全局函数
复制代码 代码如下:
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c)}
相信大家都懂。
下面是每个模块函数的拆解：
init模块：
复制代码 代码如下:
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：
复制代码 代码如下:
auto:function(){
this.li.a = setInterval(new Function('Hongru.fader.move(1)'),this.a*1000);
},
move：
复制代码 代码如下:
move:function(i){//参数i有两种选择，1和-1,1代表运行到下一张，-1代表运行到上一张
var n = this.cur+i;
var m = i==1?n==this.l?0:n:n<0?this.l-1:n; //下一张或上一张的序号（注意三元选择符的运用）
this.pos(m); //变换到上一张或下一张
},
pos：
复制代码 代码如下:
pos:function(i){
clearInterval(this.li.a);
this.z++;
this.li[i].style.zIndex = this.z; //每次让下一张图片z-index加一
this.cur = i; //绑定当前显示图片的正确序号
this.auto(); //自动运行
}
好了，总的源码是这样的：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
恩，这一部分到此结束吧，下一部分将增加淡入淡出效果和刚才提到了尽量规避闭包引起的内存泄露的优化方案！
1.那位作者的思路是隐藏掉真正的图片列表，而新建一个div，通过不断push当前图片到那个div的innerHTML里的方式来做一个一个交替变化。思路虽然有些新意，但是从目标效果的运行逻辑来看，通过改变列表元素的z-index值来实现交替变换其实更符合这个效果逻辑的初衷。
2.那位作者虽然对代码做了一定程度的封装，但封装的还是不很好，在效果的可配置上做的不很好，于是乎，这只能是一个效果，而不能作为一个可配置的插件。
（ps：以上观点纯属就事论事，无任何怀疑此作者功力的意思。且不同人有不同看法。纯属个人观点）
所以，我自己也抽空写了个类似的效果，做了一定程度的封装，虽然也只能勉强算个轻量级原生小插件吧，但还是分享出来，并做一步一步的教程，希望能给有需要的朋友一些帮助吧。先上个最终的效果图吧：
好了，Let's go！开始我们的第一部分吧！
第一部分我们要达到的目标有：
1.建立一个大的框架，实现变换的逻辑，同时建立良好的代码结构，为以后的功能扩展打好基础。（好的开始是成功的一半！）
2.第一部分要实现的效果为图片自动切换（仅仅是这一个功能）。
首先要有清晰地思路，要实现这一个效果，我们一定是调用一个初始化函数init()-->init()中开始变换第一张图片到下一张，不妨暂定这个功能函数为pos()-->要实现自动交替变换，那么肯定需要一个自动变换的功能函数auto()-->auto()中自动变换应该有两个方向，向前和向后，那么这个功能我们也可以通过一个函数来实现，暂定move()-->move()中是指定向上或向下一张变换，那么就可以回归到我们的变换函数pos()中！
那么，我们就建立了一套完整可行的逻辑体系。根据以上逻辑，我们用代码结构来表示如下：
复制代码 代码如下:
var Hongru={};
Hongru.fader = function(){
return{
init:function(options){ //options参数：id（必选）：图片列表父标签id；auto（可选）：自动运行时间；index（可选）：开始的运行的图片序号
this.pos(this.index); //变换函数
},
auto:function(){
setInterval(new Function('Hongru.fader.move(1)'),this.a*1000);
},
move:function(i){//参数i有两种选择，1和-1,1代表运行到下一张，-1代表运行到上一张
this.pos(m); //变换到上一张或下一张
},
pos:function(i){
this.auto(); //自动运行
}
}
}();
以上只是我个人的编码习惯：把功能块都写在一个闭包里，减少命名冲突，避免全局变量污染。（但是这样会有个问题，所有函数都在闭包里，很可能会导致ie内存泄露，所以还有另外种更好的方式：只把初始化函数写入闭包，其他功能通过原型内建。这样同样可以避免命名冲突和全局变量污染，又同时减轻了内存压力。这个优化方案将在下一部分一起说明）
好了，大的框架出来了，我们其实就成功了一半了，以下再根据每个模块具体的功能充实函数。由于dom选择器使我们最常使用的功能，所以这里预先定义了两个全局函数
复制代码 代码如下:
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c)}
相信大家都懂。
下面是每个模块函数的拆解：
init模块：
复制代码 代码如下:
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：
复制代码 代码如下:
auto:function(){
this.li.a = setInterval(new Function('Hongru.fader.move(1)'),this.a*1000);
},
move：
复制代码 代码如下:
move:function(i){//参数i有两种选择，1和-1,1代表运行到下一张，-1代表运行到上一张
var n = this.cur+i;
var m = i==1?n==this.l?0:n:n<0?this.l-1:n; //下一张或上一张的序号（注意三元选择符的运用）
this.pos(m); //变换到上一张或下一张
},
pos：
复制代码 代码如下:
pos:function(i){
clearInterval(this.li.a);
this.z++;
this.li[i].style.zIndex = this.z; //每次让下一张图片z-index加一
this.cur = i; //绑定当前显示图片的正确序号
this.auto(); //自动运行
}
好了，总的源码是这样的：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
恩，这一部分到此结束吧，下一部分将增加淡入淡出效果和刚才提到了尽量规避闭包引起的内存泄露的优化方案！
标签：
淡入淡出,图片轮播
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“一步一步教你写淡入淡出带注释的图片轮播插件（一）”评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。