js原生的轮播

Css样式内容

<style type="text/css">
        *{margin: 0;padding: 0}
        li{list-style: none}
        img{border: 0}
        .ad{width: 800px;height:300px;margin:0 auto;overflow: hidden;position: relative;}
        .ad ul{width: 6000px;position: absolute;left: 0}
        .ad li{float: left;width: 800px;height: 300px;overflow: hidden}
        .ad li img{width: 100%;}
        .last,.next{width: 100px;height: 40px;line-height: 40px;text-align: center;
            color:#fff;background: #c4c4c4;border-radius: 10px;cursor: pointer}
            .deriction{
                width: 800px;
                margin: 20px auto;
            }
            .fl{float: left}
            .fr{float: right}
    </style>

HTML结构

        <div class="ad">
        <ul class="content" style="left:0;">
            <li><img src="one.jpg"></li>
            <li><img src="two.jpg"></li>
            <li><img src="three.jpg"></li>
        </ul>
    </div>
    <div class="deriction">
        <div class="last fl">
            上一页
        </div>
        <div class="next fr">
            下一页
            </div>
        </div>

JS代码

     var last = document.getElementsByClassName("last")[0];
    var next = document.getElementsByClassName("next")[0];
    var content = document.getElementsByClassName("content")[0];
    var index = document.getElementsByTagName("li");
    var cli = 0;
        function Tab(ele,Tele,direction,width){
    }
    //
    Tab.prototype.change = function(ele,Tele,direction,width,o){
    if(direction=="left"){
        cli++;
        if(cli<Tele.length){
            this.animate(o,-width*cli,ele);
        }else{
            cli=0;
            this.animate(o,0,ele);
        }
    }else{
        cli--;
        if(cli>=0){
            this.animate(o,-(cli*width),ele);
        }else{
            cli=Tele.length-1;
            this.animate(o,-width*(Tele.length-1),ele);
        }
    }

    }
    //轮播图的动态效果滚动的特效
    Tab.prototype.animate = function(a,b,ele){
        console.log(a,b,ele);
        if(a<b){
            var time = setInterval(function(){
            if(a<b){
                if(b==0){
                    ele.style.left = (a+=10) +"px";
                }else{
                    ele.style.left = (a+=10) +"px";
                }

            }else{
                clearInterval(time);
            }
            },5);
        }else if(a>b){
                var tima = setInterval(function(){
                if(a>b){
                    ele.style.left = (a-=10) +"px";
                }else{
                    clearInterval(tima);
                }
                },5);
        }
    }
    var n = new Tab();
    last.addEventListener('click',onLast,false);
    function onLast(){
        var origin = parseInt(content.style.left);
        n.change(content,index,"right",800,origin);//创建新的对象  绑定上一页的动作
    }
    next.addEventListener('click',onNext,false);
    function onNext(){
        var origin = parseInt(content.style.left);
        n.change(content,index,"left",800,origin);//创建新的对象  绑定下一页的动作

    }