轮播图—运动框架来实现（拥有透明度效果）


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding:0;
            margin: 0;
            list-style: none;
        }
        #wrap{
            590px;
            height:340px;
            border:1px solid #000;
            margin: 50px auto;
            position: relative;
        }
        #wrap a{
            30px;
            height: 30px;
            line-height: 30px;
            background: #000;
            opacity: 0.3;
            filter: alpha(opacity=30);
            text-align: center;
            text-decoration: none;
            color:#fff;
            font-size: 16px;
            position: absolute;
            top: 150px;
        }
        #wrap #prev{
            left:0;
        }
        #wrap #next{
            right:0;
        }
        #wrap ol{
            position: absolute;
            bottom:10px;
            left:50%;
            margin-left: -50px;
        }
        #wrap ol li{
            15px;
            height:15px;
            border-radius: 50%;
            float: left;
            margin-left: 5px;
            background: #fff;
        }
        #wrap ol li.active{
            background: red;
        }
        #wrap ul{
             590px;
            height:auto;
            position: absolute;
            left:0;
        }
        #wrap ul li{
            590px;
            height:340px;
            position: absolute;
            top:0;
            left:0;
        }
    </style>
</head>
<body>
<div id="wrap">
    <ul id="box">
        <li><img src="img/1.jpg" alt=""/></li>
        <li><img src="img/2.jpg" alt=""/></li>
        <li><img src="img/3.jpg" alt=""/></li>
        <li><img src="img/4.jpg" alt=""/></li>
        <li><img src="img/5.jpg" alt=""/></li>
    </ul>
    <a id="prev" href="javascript:;">←</a>
    <a id="next" href="javascript:;">→</a>
    <ol id="btn">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</div>
</body>
</html>
//这里引用了一个封装好的运动框架
<script src="move1.js"></script>
<script>
    window.onload=function(){
        var wrap=document.getElementById("wrap");
        var box=document.getElementById("box");
        var aLi=box.getElementsByTagName("li");
        var aBtn=document.getElementById("btn").getElementsByTagName("li");
        var next=document.getElementById("next");
        var prev=document.getElementById("prev");
        var timer=null;
        var iNow=0;

        function demo(){
            for(var i=0;i<aBtn.length;i++){
                aBtn[i].className='';
                move(aLi[i],{opacity:0});
            }
            move(aLi[iNow],{opacity:1});
            aBtn[iNow].className="active";
        }
        for(var i=0;i<aBtn.length;i++){
            aBtn[i].index=i;
            aBtn[i].onclick=function(){
                iNow=this.index;
                demo();
            }
        }
        next.onclick=oNext;
        function oNext(){
            iNow++;
            if(iNow==aLi.length)
                iNow=0;
            demo();
        }
        prev.onclick=function(){
            iNow--;
            if(iNow==-1)
                iNow=aLi.length-1;
            demo();
        };
        timer=setInterval(oNext,2000);

        wrap.onmouseover=function(){
            clearInterval(timer);
        };
        wrap.onmouseout=function(){
            timer=setInterval(oNext,2000);
        }
    }
</script>

//js封装库

function getStyle(obj,name){
    if(obj.currentStyle){
        return obj.currentStyle[name];
    }else{
        return getComputedStyle(obj,false)[name];
    }
}
//complete-->{}:{time:500,ease:ease-in,fn:}
function move(obj,json,complete){
    clearInterval(obj.timer);
    complete=complete || {};
    complete.time=complete.time || 1000;
    complete.ease=complete.ease || "linear";
    var start={};    //开始的位置
    var dis={};   //距离

    for(var name in json){
        start[name]=parseFloat(getStyle(obj,name));   //开始的位置
        dis[name]=json[name]-start[name];     //距离
    }

    var count=Math.floor(complete.time/30);   //次数
    var n=0;   //当前的的次数
    obj.timer=setInterval(function(){
        n++;
        for(var name in json){
            switch (complete.ease){
                case "linear":   //匀速
                    var a=n/count;
                    var cur=start[name] + dis[name]*a;
                    break;
                case 'ease-in':   //加速
                    var a=n/count;
                    var cur=start[name] + dis[name]*a * a * a;
                    break;
                case 'ease-out':    //减速
                    var a=1-n/count;
                    var cur=start[name] + dis[name]*(1-a * a * a);
                    break;
            }

            if(name=="opacity"){     //透明度
                obj.style.opacity=cur;
                obj.style.filter="alpha(opacity:"+cur*100+")";
            }else{
                obj.style[name]=cur + "px";
            }
        }
        if(n==count){
            clearInterval(obj.timer);
            complete.fn && complete.fn();
        }
    },30)
}