js实现终极无缝滚动轮播

感觉没有特别难得，也就动画的函数封装很有用，没有jQuery，里面$随便加的不要在意,

css
* {
margin: 0;
padding: 0;
}

    #view {
        width: 200px;
        height: 300px;
        border: 2px solid red;
        overflow: hidden
    }

    #banner {
        overflow: hidden;
        width: 800px;
    }

    #banner img {
        float: left;
    }

    img {
        width: 200px;
        height: 300px;
    }
</style>

html:

<div id="view">
    <div id="banner">
        <img src="./2019-12-11dom事件/img/1.jpg" alt="">
        <img src="./2019-12-11dom事件/img/2.jpg" alt="">
        <img src="./2019-12-11dom事件/img/3.jpg" alt="">


    </div>
</div>
<button id="next">1234</button>
<button id="prev">上</button>

js

<script>
    var banner = document.querySelector('#banner');
    var banner_item = document.querySelector('#banner').children;
    var clone = banner_item[0].cloneNode(true);
    var prev = document.querySelector('#prev');
    banner.appendChild(clone);

    var next = document.querySelector('#next');
    var x = 0;

    next.onclick = function () {
        x++;
        if (x > banner_item.length - 1) {
            x = 1;
            banner.style.marginLeft = 0;
        }
        $_animation(banner, "marginLeft", -x * 200, 1000,function(){
            
        })
    }
    prev.onclick = function () {
        count--;
        if (x < 0) {
            x = 2;
            banner.style.marginLeft = -200 + "px";
        }
        $_animation(banner, "marginLeft", -x *200, 100,function(){

        })
    }
    var flag=true

function $_animation(el, str, end, tm, fn) {
clearInterval(el.timer)
// 1：获取初始样式
var start = getSty(el, str);
start = parseFloat(start);
// 2: 求差
var s = end - start;
// 3；执行动画
el.timer = setInterval(function () {
start += s / tm * 16.7; // 每次属性值的变化(例如每次移动距离)
if (s > 0) {// end>start 业务
if (start >= end) {
start = end;
clearInterval(el.timer);
flag=true
el.style[str] = str === ‘opacity’ ? start : start + ‘px’;
// 执行下一个动画业务从合理
fn ? fn() : null; // 判断是否有参数；如果有参数；执行回调函数
} else {
el.style[str] = str === ‘opacity’ ? start : start + ‘px’;
}

    } else {
        // 处理end <start 业务
        if (start <= end) {
            start = end;
            clearInterval(el.timer);
            flag=true
            el.style[str] = str === 'opacity' ? start : start + 'px';
            fn ? fn() : null;

        } else {
            el.style[str] = str === 'opacity' ? start : start + 'px';
        }
    }

}, 16.7)

}

function getSty(el, str) {
var res;
if (el.currentStyle) {
// ie
res = el.currentStyle[str];
} else {
// 非IE
res = getComputedStyle(el)[str];
}

return res;

}