javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果

最近刚好在看之前妙趣网站的javascript 初级运动教程，教程里说设置图片的透明度使用了一个变量。这种方法确实不错，但是燕姐喜欢麻烦。就用自己的理解方法写了一遍。其中也是各种坑。现在先把一个图片的淡入淡出效果代码放出来。

一张图片的淡入淡出##

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .img01{
         400px;
        height: 400px;
        opacity: 0.3;
        filter: alpha(opacity=30);
    }
  </style>
</head>
<body>
<img class="img01" id="img01" src="1.jpg" alt="">
<script>
/**
 * 使用js匀速运动实现图片的淡入淡出效果
 * 这里没有使用变量而是用了一个更麻烦的方法。其中遇到种种的问题
 * 出错问题点:
 * 1、首先使用getStyle获得行内样式的opacity,注意点这个获得的alpha值其实是一个字符串类型，要转为数值型
 * 2、特别要注意在将值付给opactiy就要这里有一个小数精确的问题: 例如0.1+0.2不等于0.3,解决这个问题可以分别先*10，在除以10
 * 3、timer 原先被我定义在startMove中。当快速移入的时候就会出现闪屏的问题。需要把timer移到外面来。
 */
window.onload = function () {
    var oImg = document.getElementById('img01');
    var alpha = Number(getStyle(oImg,"opacity"));

    oImg.onmouseover = function () {
        startMove(1);
    };

    oImg.onmouseout = function () {
        startMove(0.3);
    };
    
    var timer = null;
   
    function startMove (iTarget) {
        var oImg = document.getElementById('img01');
        clearInterval(timer);
        timer = setInterval(function(){
            var speed = 0;
            if( alpha < iTarget ) {
                speed = 0.1;
            }else{
                speed = -0.1;
            }

            if(alpha === iTarget){
                clearInterval(timer);
            }else{
                alpha = (alpha*10 + speed*10)/10;
                oImg.style.opacity = alpha;
                oImg.style.filter = "alpha(opacity="+ alpha*100 +")";
            }
        },30);
    }

    function getStyle (obj, attr) {
        if(window.getComputedStyle){
            return window.getComputedStyle(obj,null)[attr];
        }else{
            return obj.currentStyle[attr];
        }
    }
 };

</script>
</body>
</html>

在做多张图片的淡入淡出的时候也是遇到各种问题。话说我是问题君吗？哭！后来实在找不出问题的在哪里，就到 segementfalut上问问题，好心人帮助回答了问题。现在把大神的代码放出来，其中有一篇他自己写的相关文章还不错，推荐给大家
http://www.cnblogs.com/silin6/p/4333999.html

多个图片淡入淡出##

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
        margin: 0;
        padding: 0;
    }

    ul,li{
        list-style: none;
    }

    .imglist {
         1000px;
        height: 400px;
    }
    .imglist ul {
         1000px;
        overflow: hidden;
    }
    .imglist ul li.item {
         200px;
        height: 400px;

        float: left;

        opacity: 0.3;
        filter: alpha(opacity=30);
    }

    .imglist ul li.item img {
         200px;
        height: 400px;

        float: left;
    }
  </style>
</head>
<body>
<div class="imglist">
    <ul id="imglist">
        <li class="item i1"><img src="1.jpg" alt=""></li>
        <li class="item i2"><img src="1.jpg" alt=""></li>
        <li class="item i3"><img src="1.jpg" alt=""></li>
        <li class="item i4"><img src="1.jpg" alt=""></li>
        <li class="item i5"><img src="1.jpg" alt=""></li>
    </ul>
</div>
<script>

window.onload = function () {
   var oImg = document.getElementById('imglist');
   var oImgLi = oImg.getElementsByTagName('li');
//ES5的func
Array.prototype.forEach.call(oImgLi, function (img) {//传递回调函数，构建新的作用域
    //timer、alpha和startMove，不应该被每个li共享使用，因为每个li都有自己的状态，自己的动画状态（自己的动画时长，alpha透明度）
    var timer = null,
        alpha = 0.3;
    function startMove(obj, iTarget) {
        clearInterval(timer);
        timer = setInterval(function () {
            var speed = 0;
            if (alpha < iTarget) {
                speed = 0.1;
            } else {
                speed = -0.1;
            }

            if (alpha === iTarget) {
                clearInterval(timer);
            } else {
                alpha = (alpha * 10 + speed * 10) / 10;
                obj.style.opacity = alpha;
                obj.style.filter = "alpha(opacity=" + alpha * 100 + ")";
            }
        }, 30);
    }
    img.onmouseover = function () {
        startMove(this, 1);

    };

    img.onmouseout = function () {
        startMove(this, 0.3);
    };
});

 };

</script>
</body>
</html>