不知题目是否妥当，总之就是在相册中使用fade效果，让图片切换变得非常自然舒服。
1.<div id="album">
2.<img src="javascript:void(0)" />
3.<img src="javascript:void(0)" />
4.<img src="javascript:void(0)" />
5.<img src="javascript:void(0)" />
6.</div>
<div id="album"> <img src="javascript:void(0)" /> <img src="javascript:void(0)" /> <img src="javascript:void(0)" /> <img src="javascript:void(0)" /> </div>
运行代码
添加样式，目标是让所有图片像叠罗汉一样摞在一起。
01.#album{
02.position:relative;
03.border:10px solid #000;
04.width:90px;
05.height:120px;
06.overflow:hidden;
07.}
08.#album img{
09.position:absolute;
10.top:0;
11.left:0;
12.}
<div id="album"> <img src="javascript:void(0)" /> <img src="javascript:void(0)" /> <img src="javascript:void(0)" /> <img src="javascript:void(0)" /> </div> <style type="text/css"> #album{ position:relative; border:10px solid #000; width:90px; height:120px; overflow:hidden; } #album img{ position:absolute; top:0; left:0; } </style>
运行代码
下面详细讲解一下淡入谈出相册的运作。尽管相册有许多相片，每次运行都是执行两张相片的透明度设置。并且当上面一张（我们看到的那张）正准备淡出时，下面那张已淡入得差不多。换言之，我们要想办法错开两张图片的出场时间。由于淡入淡出（fade）其实是透明特效加display的切换，如何取得opacity样式值呢？要知道，设置样式与获取样式，完全不是一回事。获取样式远比设置样式复杂，如果不是内联样式，在IE中就要调用currentStyle加遍历父级元素。一个取巧的办法，就是不要在获取opacity中下工夫，直接设置一个自定义属性opacity（非style.opacity），每次执行透明度设置时用这个opacity赋值，并每次一点点改变这个opacity的值。正在淡出的图片对象的opacity呈递减状态，反之亦然。
01.var album = function(el){
02.var node = (typeof el == "string")? document.getElementById(el):el;
03.var images = node.getElementsByTagName("img");
04.var length = images.length;
05.for(var i=1;i<length;i++) images[i].opacity = 0;//为所有图片设置一个自定义属性opacity
06.images[0].opacity = 0.99;
07.var current = 0;
08.(function(){
09.setTimeout(function(){
10.var cOpacity = images[current].opacity,
11.next = images[current+1]?current+1:0;//下一张图片的索引，如果没有就回到第一张
12.var nOpacity = images[next].opacity;
13.cOpacity-=.05;
14.nOpacity+=.05;
15.images[current].opacity = cOpacity;
16.images[next].opacity = nOpacity;
17.images[next].style.display = "block";//确保肯定有一张图片是可见的
18.setOpacity(images[current]);
19.setOpacity(images[next]);
20.if(cOpacity<=0) {
21.images[current].style.display = "none";
22.current = next;
23.setTimeout(arguments.callee,1000);
24.}else{
25.setTimeout(arguments.callee,50);
26.}
27.},100)
28.})()
29.}
30.var setOpacity =function(obj) {
31.if(obj.opacity>.99) {
32.obj.opacity = .99;
33.}
34.obj.style.opacity = obj.opacity;
35.obj.style.filter = "alpha(opacity=" + (obj.opacity*100) + ")";
36.}
<!doctype html> <html dir="ltr" lang="zh-CN" > <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8"> <title>相册</title> </head> <body> <div id="album" > <img src="javascript:void(0)" /> <img src="javascript:void(0)" /> <img src="javascript:void(0)" /> <img src="javascript:void(0)" /> </div> <style type="text/css"> #album{ position:relative; border:10px solid #000; width:85px; height:120px; overflow:hidden; } #album img{ position:absolute; top:0; left:0; } </style> <script type="text/javascript"> var album = function(el){ var node = (typeof el == "string")? document.getElementById(el):el; var images = node.getElementsByTagName("img"); var length = images.length; for(var i=1;i<length;i++) images[i].opacity = 0;//为所有图片设置一个自定义属性opacity images[0].opacity = 0.99; images[0].style.display = "block"; var current = 0; (function(){ setTimeout(function(){ var cOpacity = images[current].opacity, next = images[current+1]?current+1:0;//下一张图片的索引，如果没有就回到第一张 var nOpacity = images[next].opacity; cOpacity-=.05; nOpacity+=.05; images[current].opacity = cOpacity; images[next].opacity = nOpacity; images[next].style.display = "block";//确保肯定有一张图片是可见的 setOpacity(images[current]); setOpacity(images[next]); if(cOpacity<=0) { images[current].style.display = "none"; current = next; setTimeout(arguments.callee,1000); }else{ setTimeout(arguments.callee,50); } },100) })() } var setOpacity =function(obj) { if(obj.opacity>.99) { obj.opacity = .99; } obj.style.opacity = obj.opacity; obj.style.filter = "alpha(opacity=" + (obj.opacity*100) + ")"; } window.onload = function(){ var el = document.getElementById("album"); album(el); } </script> <p>请稍等4秒………………</p> </body> </html>
运行代码
ablum函数中的闭包相当于：
01.var repeat = function(){
02.setTimeout(function(){
03.//*************略*************
04.if(cOpacity<=0) {
05.images[current].style.display = "none";
06.current = next;
07.setTimeout(repeat,1000);
08.}else{
09.setTimeout(repeat,50);
10.}
11.},100)
12.repeat();
闭包让我们少写许多东西，程序变得更紧凑。我们甚至可以搞个点击停顿效果，不过说实话，只是个假象而已，只能让它多停留两秒。你多点击几下，这张图片就静止久一点。我可不想点击一下整个相册就不动了。
01.var album = function(el){
02.var node = (typeof el == "string")? document.getElementById(el):el;
03.var images = node.getElementsByTagName("img");
04.var length = images.length;
05.var current = 0;
06.for(var i=1;i<length;i++){
07.images[i].opacity = 0;//为所有图片设置一个自定义属性opacity
08.images[i].onclick = (function(i){//点击停顿效果
09.return function(){
10.current = i + 1;
11.if(current > 3)
12.current = 3
13.}
14.})(i);
15.}
16.images[0].opacity = 0.99;
17.(function(){
18.setTimeout(function(){
19.var cOpacity = images[current].opacity,
20.next = images[current+1]?current+1:0;//下一张图片的索引，如果没有就回到第一张
21.var nOpacity = images[next].opacity;
22.cOpacity-=.05;
23.nOpacity+=.05;
24.images[current].opacity = cOpacity;
25.images[next].opacity = nOpacity;
26.images[next].style.display = "block";//确保肯定有一张图片是可见的
27.setOpacity(images[current]);
28.setOpacity(images[next]);
29.if(cOpacity<=0) {
30.images[current].style.display = "none";
31.current = next;
32.setTimeout(arguments.callee,1000);
33.}else{
34.setTimeout(arguments.callee,50);
35.}
36.},100)
37.})()
38.}
39.var setOpacity =function(obj) {
40.if(obj.opacity>.99) {
41.obj.opacity = .99;
42.}
43.obj.style.opacity = obj.opacity;
44.obj.style.filter = "alpha(opacity=" + (obj.opacity*100) + ")";
45.}
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8"> <title>相册</title> </head> <body> <div id="album" > <img id="img1" src="javascript:void(0)" /> <img src="javascript:void(0)" /> <img src="javascript:void(0)" /> <img src="javascript:void(0)" /> </div> <style type="text/css"> #album{ position:relative; border:10px solid #000; width:85px; height:120px; overflow:hidden; } #album img{ position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0); } #img1 { opacity:.99; filter:alpha(opacity=99); } </style> <script type="text/javascript"> var album = function(el){ var node = (typeof el == "string")? document.getElementById(el):el; var images = node.getElementsByTagName("img"); var length = images.length; var current = 0; for(var i=1;i<length;i++){ images[i].opacity = 0;//为所有图片设置一个自定义属性opacity images[i].onclick = (function(i){ return function(){ current = i + 1; if(current > 3) current = 3 } })(i); } images[0].opacity = 0.99; (function(){ setTimeout(function(){ var cOpacity = images[current].opacity, next = images[current+1]?current+1:0;//下一张图片的索引，如果没有就回到第一张 var nOpacity = images[next].opacity; cOpacity-=.05; nOpacity+=.05; images[current].opacity = cOpacity; images[next].opacity = nOpacity; images[next].style.display = "block";//确保肯定有一张图片是可见的 setOpacity(images[current]); setOpacity(images[next]); if(cOpacity<=0) { images[current].style.display = "none"; current = next; setTimeout(arguments.callee,1000); }else{ setTimeout(arguments.callee,50); } },100) })() } var setOpacity =function(obj) { if(obj.opacity>.99) { obj.opacity = .99; } obj.style.opacity = obj.opacity; obj.style.filter = "alpha(opacity=" + (obj.opacity*100) + ")"; } window.onload = function(){ var el = document.getElementById("album"); album(el); } </script> </body> </html>
运行代码
好了本文就到止了，简单的结构层与表现层注定了行为层不会有多大作为。相册如果要做得很漂亮，通常需要动用到定义列表与伪类，随之而来的是几百行javascript代码，显然这与我的题目不符。另，基于时间轴来编写代码太考验人的思维能力，没有可视化界面吓跑一堆人，都跑去做Flash了。
