SOURCE

window.onload=function(){
    var div2=document.querySelectorAll("#div2");
    var ul1=document.getElementById("ul1");
    ul1.style.width=220*div2.length+"px";
    var Alla=document.getElementsByTagName("a");
    var div3=document.getElementById("div3");
    var div1=document.getElementById("div1");
    //总长度-当前长度/2=中心位置
    div3.style.left=(div1.offsetWidth-div3.offsetWidth)/2+"px";
    Alla[0].style.backgroundColor="yellowgreen"
    for(var i=0;i<Alla.length;i++)
    {
        Alla[i].sy=i;
        Alla[i].onclick=function(){
            for(var i=0;i<Alla.length;i++)
                Alla[i].style.backgroundColor="";
            move(ul1,"left",10,-220*this.sy);
        };
    }
};
//创建一个函数执行图像移动效果
//参数1:要执行效果的元素的对象
//参数2:要执行的属性，比如left，top
//参数3:要移动的速度
//参数4:要移动的目标位置
function move(obj,attr,speed,weizhi){
    clearInterval(obj.timer);
    //进来先判断移动的方向
    //当前位置大于目标位置说明要向左移动
    var oldvalue=parseInt(getComputedStyle(obj,null)[attr]);
    if(oldvalue>weizhi)
        speed=-speed;
    //每过30毫秒移动一次
    obj.timer=setInterval(function(){
          var oldvalue=parseInt(getComputedStyle(obj,null)[attr]);
          var newvalue=oldvalue+speed;
          //判断新地址是否超过了目标位置，如果超过就设置为目标位置
          if(newvalue>weizhi&&speed>0||newvalue<weizhi&&speed<0)
              newvalue=weizhi;
        //设置元素新的位置
        obj.style[attr]=newvalue+"px";
        //如果设置的位置正是目标位置那么就不在执行了
        if(newvalue==weizhi)
             clearInterval(obj.timer);



     },30)

}

<div id="div1">
    <ul id="ul1">
        <li><div id="div2" style="background-color:red"></div></li>
        <li><div id="div2" style="background-color:green"></div></li>
        <li><div id="div2" style="background-color:yellow"></div></li>
        <li><div id="div2" style="background-color:blue"></div></li>
    </ul>
    <div id="div3">
    <a href="javascript:;"></a>
    <a href="javascript:;"></a>
    <a href="javascript:;"></a>
    <a href="javascript:;"></a>
    </div>
    
</div>

*{
    margin:0;
    padding:0;
}
#div1{
    width:220px;
    height:150px;
    padding:10px 0 ;
    background-color:greenyellow;
    margin: 50px auto;
    position:relative;
    overflow: hidden;

}
#div2{
    width:200px;
    height:150px;
}
#ul1{
    position:absolute;
    width:2000px;
    left:0px;
    
}
#ul1 li{
    margin:0 10px;
    list-style:none;
    float:left;
}
#div3{
    position:absolute;
    bottom:15px;
}
#div3 a{
    float:left;
    width:15px;
    height:15px;
    background-color:black;
    margin:0 2px;
    opacity:0.5;
}
#div3 a:hover{
    background-color:yellowgreen;
    opacity:0.5;
}