一个很简单的淡入淡出相册(转)

不知题目是否妥当，总之就是在相册中使用fade效果，让图片切换变得非常自然舒服。

<div id="album"> 
  <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type1.jpg" /> 
  <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type2.jpg" /> 
  <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type3.jpg" /> 
  <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type4.jpg" /> 
</div>

添加样式，目标是让所有图片像叠罗汉一样摞在一起。

#album{ 
  position:relative; 
  border:10px solid #000; 
  90px; 
  height:120px; 
  overflow:hidden; 
} 
#album img{ 
  position:absolute; 
  top:0; 
  left:0; 
}

下面详细讲解一下淡入谈出相册的运作。尽管相册有许多相片，每次运行都是执行两张相片的透明度设置。并且当上面一张（我们看到的那张）正准备淡出时，下面那张已淡入得差不多。换言之，我们要想办法错开两张图片的出场时间。由于淡入淡出（fade）其实是透明特效加display的切换，如何取得opacity样式值呢？要知道，设置样式与获取样式，完全不是一回事。获取样式远比设置样式复杂，如果不是内联样式，在IE中就要调用currentStyle加遍历父级元素。一个取巧的办法，就是不要在获取opacity中下工夫，直接设置一个自定义属性opacity（非style.opacity），每次执行透明度设置时用这个opacity赋值，并每次一点点改变这个opacity的值。正在淡出的图片对象的opacity呈递减状态，反之亦然。

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; 
  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) + ")"; 
}

<!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="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type1.jpg" />
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type2.jpg" />
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type3.jpg" />
            <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type4.jpg" />
        </div>
        <style type="text/css">
            #album{
                position:relative;
                border:10px solid #000;
                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函数中的闭包相当于：

var repeat = function(){ 
  setTimeout(function(){ 
    //*************略************* 
    if(cOpacity<=0) { 
      images[current].style.display = "none"; 
      current = next; 
      setTimeout(repeat,1000); 
    }else{ 
      setTimeout(repeat,50); 
    } 
  },100) 
  repeat();

闭包让我们少写许多东西，程序变得更紧凑。我们甚至可以搞个点击停顿效果，不过说实话，只是个假象而已，只能让它多停留两秒。你多点击几下，这张图片就静止久一点。我可不想点击一下整个相册就不动了。

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) + ")"; 
}

<!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="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type1.jpg" />
  <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type2.jpg" />
  <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type3.jpg" />
  <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/t_type4.jpg" />
</div>
<style type="text/css">
  #album{
    position:relative;
    border:10px solid #000;
    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了。

来源：http://www.cnblogs.com/rubylouvre/archive/2009/09/14/1566157.html