demo 完整的轮播图（焦点，自动，左右按钮）

<div class="banner" id="js_banner"> <!--整个轮播图框架-->
        <div class="slider"> <!--图片框架-->
            <div class="pic" id="js_pic">
                <div class="pic-img"><a href="javascript:">![](images/img_01.jpg)</a></div>
                <div class="pic-img"><a href="javascript:">![](images/img_02.jpg)</a></div>
                <div class="pic-img"><a href="javascript:">![](images/img_03.jpg)</a></div>
                <div class="pic-img"><a href="javascript:">![](images/img_04.jpg)</a></div>
                <div class="pic-img"><a href="javascript:">![](images/img_05.jpg)</a></div>
            </div>
            <div class="btn" id="js_btn"> <!--按钮框架-->
                <span class="left"></span>
                <span class="right"></span>
            </div>
        </div>
    </div>

css清单

*{
    margin: 0;
    padding: 0;
}
img{
    vertical-align: top;
}
.banner{
    width: 800px;
    height: 345px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}
.slider{
    width: 800px;
    height: 300px;
}
.pic{
    width: 1600px;
    height: 300px;
}
.pic-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: 300px;
}
.pig-img img{
    width: 100%;
}
.btn{
    text-align: center;
    padding-top: 5px;
}

.btn-icon{
    width: 24px;
    height: 20px;
    display: inline-block;
    background: url(../images/icon.png) no-repeat -24px -782px;
    margin: 0 5px;
    cursor: pointer;
    text-indent: -20em;
    overflow: hidden;
}

.bg-icon{
    background-position: -24px -762px;
}


.left,.right{
    width:39px;height:79px;
    background:url(../images/left_right.png) no-repeat;
    cursor:pointer;
    position:absolute;
    top: 36%;
    opacity: 0;
}

.left{
    left:0;
    background-position:-17px -10px;
}
.right{
    right:0;
    background-position:-64px -10px;
}

function $(id){    // 获取 id
    return document.getElementById(id);
}


//  屏幕到上和到右距离（兼容）
function scroll(){
    if(window.pageXOffset != null){  //  ie9 +
        return  {
            left:window.pageXOffset,
            top:window.pageYOffset
        }
    }else if(document.compatMode == "CSS1Compat"){  //  标准模式
        return {
            left:document.documentElement.scrollLeft,
            top:document.documentElement.scrollTop
        }
    }else{   //  怪异模式
        return {
            left:document.body.scrollLeft,
            top:document.body.scrollTop
        }
    }
}


//  屏幕宽高（兼容）
function client(){
    if(window.innerWidth != null){     //  ie9 +
        return {
            width:window.innerWidth,
            height:window.innerHeight
        }
    }else if(document.compatMode == "CSS1Compat"){   //  标准模式
        return {
            width:document.documentElement.clientWidth,
            height:document.documentElement.clientHeight
        }
    }else{   //  怪异模式
        return {
            width:document.body.clientWidth,
            height:document.body.clientHeight
        }
    }
}

//  匀速动画 右走
function animate1(obj,speed,target){
    obj.timer = setInterval(function(){
        if(obj.offsetLeft>target){
            clearInterval(obj.timer);
        }else{
            obj.style.left = obj.offsetLeft + speed + "px";
        }
    },50)
}



// 匀速动画可左可右
function animate2(obj,target){
    clearInterval(obj.timer);
    var speed = obj.offsetLeft - target < 0 ? 10 : -10;
    obj.timer = setInterval(function(){
        var run = target - obj.offsetLeft;
        if(Math.abs(run)<=10){
            clearInterval(obj.timer);
        }else{
            obj.style.left = obj.offsetLeft + speed +"px";
        }
    },30)
}


// 缓动向右动画
function animate3(obj,target){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var speed = (target - obj.offsetLeft)/10;
        console.log(speed);
        speed = speed>0?Math.ceil(speed) :Math.floor(speed);
        obj.style.left = obj.offsetLeft + speed +"px";
        if(obj.offsetLeft == target){
            clearInterval(obj.timer);
        }
    },50)
}

//  获取样式属性（兼容）
function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return window.getComputedStyle(obj,null)[attr];
    }
}

//  缓动动画 任何方向
function animate4(obj,attr,target){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var cus = parseInt(getStyle(obj,attr));
        var speed = (target - cus) /10;
        speed = speed >0 ? Math.ceil(speed) : Math.floor(speed);
        if(cus == target){
            clearInterval(obj.timer);
        }else{
            obj.style[attr] = cus + speed + "px";
        }
    },30)
}

//  缓动动画  传多个属性
function animate5(obj,json){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        for(var attr in json){
            var cus = parseInt(getStyle(obj,attr));
            var speed = (json[attr] - cus) /10;
            speed = speed >0 ? Math.ceil(speed) : Math.floor(speed);
            if(cus == json[attr]){
                clearInterval(obj.timer);
            }else{
                obj.style[attr] = cus + speed + "px";
            }
        }
    },30)
}

// 缓动动画  传多个属性 + 回调
function animate6(obj,json,fun){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var flag = true;
        for(var attr in json){
            var leader = parseInt(getStyle(obj,attr));
            var speed = (json[attr] - leader)/10;
            speed = speed >0 ? Math.ceil(speed):Math.floor(speed);
            obj.style[attr] = leader + speed + "px";
            if(leader!=json[attr]){
                flag = false;
            }
        }
        if(flag){
            clearInterval(obj.timer);
            if(fun){
                fun();
            }
        }
    },20)
}

//  缓动动画  多个属性 + 回调 + 透明度 + zindex
function animate(obj,json,fun){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var flag = true;
        for(var attr in json){
            var leader = 0;
            if(attr == "opacity"){
                leader = parseInt(getStyle(obj,attr)*100);
            }else{
                leader = parseInt(getStyle(obj,attr));
            }
            var speed = (json[attr] - leader)/10;
            speed = speed>0 ? Math.ceil(speed):Math.floor(speed);
            if(attr == "opacity"){
                obj.style.opacity = (leader + speed)/100;
            }else if(attr == "zIndex"){
                obj.style.zIndex = json[attr];
            }else{
                obj.style[attr] = leader + speed + "px";
            }
            if(leader!=json[attr]){
                flag = false;
            }
        }
        if(flag){
            clearInterval(obj.timer);
            if(fun){
                fun();
            }
        }
    },20)
}

window.onload = function(){
    function $(id){
        return document.getElementById(id);
    }

    var banner = $("js_banner");    //获取最大盒子
    var pic = $("js_pic");    //滚动图片的父亲
    var imgs = pic.children;     //获取所有需要滚动图片，存为一个组；
    var btn = $("js_btn");     //获取按钮控制按钮的父盒子



    for(var i=0;i<imgs.length;i++){    //循环创建小圆点
        var span = document.createElement("span");   //创建小圆点
        span.className = "btn-icon";          //给小圆点添加样式
        span.innerHTML = imgs.length - i;        //通过倒叙的方式插入
        btn.insertBefore(span,btn.children[1]);       //可以直接用app直接插入，这里只是用一个新方法
    }
    var spans = btn.children;     //获取所有span
    spans[1].setAttribute("class","btn-icon bg-icon") ;   //给span设置样式，一个通用样式，一个蓝色样式



    //点击左边按钮，实现轮播效果
    //计算动画距离
    var scrollWidth = banner.clientWidth;   //得到大盒子的宽度，也就是后面动画走的距离
    //console.log(scrollWidth);
    for(var i = 1;i<imgs.length;i++){    // 把所有的图片丢到后面去搁着  从1开始，因为第0张（也就会第一张不计算）
        imgs[i].style.left = scrollWidth + "px";   //把除了第一张以外的所有图片全都放到后面去
    }

    //点击按钮移动图片
    var iNow = 0;  //表示索引，用来控制播放张数
    for(var key in spans){   // 循环遍历得到所有span，因为左右按钮也是span
        spans[key].onclick = function(){
            if(this.className == "left"){
                animate(imgs[iNow],{left:scrollWidth});

                --iNow<0 ? iNow = imgs.length - 1 : iNow;   //当前图片索引减减，就是上一张图片

                imgs[iNow].style.left = -scrollWidth + "px";   //让上一张图片出现在当前显示的左边，这样可以看起来是从左边出来的

                animate(imgs[iNow],{left:0});   //让上一张图片从左边到屏幕中间，实现动画效果

                setBtn();
            }else if(this.className == "right"){
                autoPlay();
            }

        }
    }



    //控制小圆点轮播的函数
    //先清除所有小圆点，然后再给想要的小圆点添加样式
    function setBtn(){
        for(var i = 1;i<spans.length-1;i++){
        //我们有六个小圆点，两个箭头按钮，都是span.但是我们只要六个小圆点就行了，所以第一个span和最后一个span不要
            spans[i].className = "btn-icon";  //清除样式，保留基本样式
        }
        spans[iNow+1].className = "btn-icon bg-icon";  //给当前小圆点添加样式
    }

    function autoPlay(){
        animate(imgs[iNow],{left:-scrollWidth}); //往左边走为负，右边则为正

        ++iNow>imgs.length-1 ? iNow = 0 : iNow;   //当前图片索引减减，就是上一张图片

        imgs[iNow].style.left = scrollWidth + "px";   //让上一张图片出现在当前显示的左边，这样可以看起来是从左边出来的

        animate(imgs[iNow],{left:0});   //让上一张图片从左边到屏幕中间，实现动画效果

        setBtn();
    }

    var timer = null;
    timer = setInterval(autoPlay,3000);

    banner.onmouseover = function(){
        animate(btn.children[0],{opacity:100});
        animate(btn.children[spans.length-1],{opacity:100});
        clearInterval(timer);
    };
    banner.onmouseout = function(){
        clearInterval(timer);
        animate(btn.children[0],{opacity:0 });
        animate(btn.children[spans.length-1],{opacity:0});
        timer = setInterval(autoPlay,3000);
    };


};