运动框架

move(eleNode,target,attr);
eleNode：运动物体
target:运动目标
attr : 运动属性

function move(eleNode,target,attr){
    var gs = getComputedStyle;
    clearInterval(eleNode.timer);
    eleNode.timer = setIntervar(function(){
        var iNow = attr === "opacity" ? g(eleNode)[attr] * 100 : parseInt(g(eleNode)[attr]);
        var speed = (itarget - iNow)/6;
        speed  = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        iNow += speed;
        eleNode.style[attr] = attr === "opacity" ? iNow / 100 : iNow + "px";
        iNow === target ? clearInterval(eleNode.timer) : "";
    },50)
}

轮播图版本一

布局：

<style>

*{
margin: 0;
padding: 0;
}
#container{
width: 1380px;
height: 350px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#container ul{
position: absolute;
/* transition: all .5s; */
}
#container ul li{
list-style-type: none;
float: left;
width: 1380px;
height: 350px;
}
#container ul li img{
width: 100%;
height: 100%;
}


</style>
<button id="prev_btn">上一张</button>
<button id="next_btn">下一张</button>
<div id="container">
<ul id="banner_container">
<li><img src="https://img.zcool.cn/community/01f1515ca2ca6da801214168c2ae09.jpg@1380w" alt=""></li>
<li><img src="https://img.zcool.cn/community/0138ec5ca44892a801208f8be4c0ea.jpg@1380w" alt=""></li>
<li><img src="https://img.zcool.cn/community/01b73c5ca2ca82a801214168fa83fa.jpg@1380w" alt=""></li>
<li><img src="https://img.zcool.cn/community/01037e5ca2ca93a801208f8b8d457d.jpg@1380w" alt=""></li>
<li><img src="https://img.zcool.cn/community/01da355ca419dfa8012141682afdd2.jpg@1380w" alt=""></li>
<li><img src="https://img.zcool.cn/community/01f1515ca2ca6da801214168c2ae09.jpg@1380w" alt=""></li>
</ul>
</div>

js

// 当前显示的页面;
// var index = 0;
// 上一张显示的页面;
// var prev = 0;
//将要显示的页面
// var next = 0;
// toNext() toPrev(); toIndex();

var
prevBtn = document.getElementById("prev_btn"),
nextBtn = document.getElementById("next_btn"),
bannerContainer = document.getElementById("banner_container"),
bannerList = bannerContainer.children,
index = 0;

nextBtn.addEventListener("click",toNext);
prevBtn.addEventListener("click",toPrev);

function toNext(){
    if(index === bannerList.length - 1){
        //到了最后一张
        bannerContainer.style.left = 0;
        index = 1;
    }else{
        index ++ ;
    }
    animate();
}

function toPrev(){
    if(index === 0 ){
        index = bannerList.length -1;
    }else{
        index --;
    }
    animate();
}
function animate(){
    move(bannerContainer, -1380 * index,"left");
}
function init(){
    //复制一份第一张图片；
    //让ul的宽度可以容下所有的li
    bannerContainer.style.width = 100 * bannerList.length + "%";
}
init();

轮播图版本二（可自动轮播）

动画就两点：
1、下标控制
下一个 toNext();
上一个 toPrev();
任意值; toIndex();
2 动画控制;
计算需要更改的属性值;
move(dom,target,attr);

var
prevBtn = document.getElementById("prev_btn"),
nextBtn = document.getElementById("next_btn"),
bannerContainer = document.getElementById("banner_container"),
bannerList = bannerContainer.children,
index = 0,
timer = null,
length = bannerList.length;

function init(){
 //让ul的宽度可以容下所有的li
    bannerContainer.style.width = 100*bannerList.length + "%";
}

function toNext(){
    if(index === length-1){
        index = 0;
    }else{
        index ++ ;
    }
    animate("next");
}

function toPrev(){
    if(index === 0){
        index = length -1;
    }else{
        index --;
    }
    animate("prev");
}

function animate(arg){
//下一张的终止条件
    if(index === 0 && arg === "next"){
        bannerContainer.style.left = 0;
        index ++;
    }
    //上一张的终止条件
    if(index === length - 1 && arg === "prev"){
        bannerContainer.style.left = -(length -1)*1380 + "px";
        index --;
    }
    move(bannerContainer, -index*1380,"left");
}
preBtn.addEventListener("click",toPrev);
nextBtn.addEventListener("click",toNext);
init();
//自动轮播
setInterval(toNext,2000);