用原生js写淡入淡出动画

css样式

<style type="text/css">
            #box{
                width:1200px;
                height: 400px;
                margin: 0 auto;
                border:1px solid #000;
                position: relative;
            }
            img{
                width: 100%;
                margin: 0 auto;
                position: absolute;
                top: 0;
            }
            p{
                text-align: center;
            }
        </style>

html代码

<div id="box">
            <img src="img/j_banner1.jpg" alt="" />
            <img src="img/j_banner2.jpg" alt="" />
            <img src="img/j_banner3.jpg" alt="" />
            <img src="img/j_banner4.jpg" alt="" />
            <img src="img/j_banner5.jpg" alt="" />
        </div>
        <p><button id="btn">点击我，更换图片</button></p>

js代码

<script type="text/javascript">
        var _btn = document.getElementById("btn");
        var _img = document.getElementsByTagName("img");
        var num = 4;
        
        function setOpacity(elem,level){   //level取值范围0---100
                if(elem.filters){    //ie
                    elem.style.filter="alpha(opacity="+level+")";
                }else{
                    elem.style.opacity=level/100;
                }
            }

            function fadeIn(elem){
            setOpacity(elem,0);//先把透明度设置成0
            for(var i=0;i<=100;i++){
                (function(){
                    var po=i;
                    setTimeout(function(){
                        setOpacity(elem,po);
                    },10*po);
                })();
            }
        }
                    
            function fadeOut(elem){
            for(var i=0;i<=100;i++){
                (function(){
                    var po=i;
                    setTimeout(function(){
                        setOpacity(elem,po);
                    },10*(100-po));
                })();
            }
        }
            
        _btn.onclick = function(){
            if(num==0){
                    fadeOut(_img[num]);
                    num=4;  
                    fadeIn(_img[num]);
                }else{
                    fadeIn(_img[num-1]);
                    fadeOut(_img[num]);
                    num--;
                }
                
            }
    </script>