SOURCE

var focus=document.querySelector('.focus');
var ul=focus.querySelector('ul');
var ol=focus.querySelector('ol');
var pre=focus.querySelector('.pre');
var next=focus.querySelector('.next');

//动态生成小圆点
for(var i=0;i<ul.children.length;i++){
    //console.log(1)
    var addli=document.createElement('li'); 
    ol.appendChild(addli);
    ol.children[i].index=i;
    ol.children[i].addEventListener('click',function(){
        console.log(this.index);
        var step =200 * this.index;
        startMove(ul,{left:-step});

        for(var i=0;i<ol.children.length;i++){
            ol.children[i].className='';
        }
        this.className="current";
    })
}

 
//设置第一个li 类名为： current
ol.children[0].className='current';



















function getStyle(obj,attr){
            return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
        }
        function startMove(obj,json,fn) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var bStop = true;
                for(attr in json){
                    // 1. 取得当前的值（可以是widht，height，opacity等的值）
                    var objAttr = 0;
                    if(attr == "opacity"){
                        objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
                    }else{
                        objAttr = parseInt(getStyle(obj,attr));
                    }
                    // 2.计算运动速度
                    var iSpeed = (json[attr] -objAttr)/10;
                        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
                    // 3. 检测所有运动是否到达目标
                    if(objAttr != json[attr]){
                        bStop = false;
                    }
                    if(attr == "opacity"){
                        obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
                        obj.style.opacity = (objAttr+iSpeed)/100;
                    }else{
                        obj.style[attr] =  objAttr+iSpeed+'px';// 需要又.属性名的形式改成[]
                    }
                }
                if(bStop){ // 表示所有运动都到达目标值
                    clearInterval(obj.timer);
                    if(fn){
                        fn();
                    }
                }
            },30);
        }

<div class="focus">
    <ul>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
    </ul>
    <ol>
        
    </ol>
    <span class="pre"> &lt </span>
    <span class="next"> &gt </span>
</div>

<div class="d2">
    
</div>

*{
    margin:0;
    padding:0;
}
li{
    list-style: none;
}
.current{
    background:red!important;
    width:15px!important;
}
.focus{
    position: relative;
    width:200px;
    height:200px;
    border:3px solid;
    margin:100px auto;
    
}
.focus ul{
    position: absolute;
    width:600px;
}
.focus ul li{
    float: left;
    width:200px;
    height:200px;
    background:palegreen;
}



.focus ol{
    position: absolute;
    width:100%;
    bottom:5px;
    left:5px;
    
    
}

.focus ol li{
    float:left;
    width:10px;
    height:10px;
    background-color:blue;
    margin:5px;
}

.focus .pre, .focus .next{
    position: absolute;
    top:100px;
}
.focus .next{
    right:0;
}
.focus .pre{
    left:0;
}


.d2{
    position: absolute;
    top:0;
    width:50px;
    height:50px;
    background:pink;
}