js实现轮播图效果

动画效果js部分:

function animate(obj, target,callback) {
   
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
   
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
   
            clearInterval(obj.timer);
            if(callback){
   
                callback();
            }
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 20)
}

js部分

window.onload = function () {
   
    // 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
    var box = document.querySelector(".box");
    var pos1 = document.querySelector(".pos1");
    var pos2 = document.querySelector(".pos2");
    var num = 0;
    var circle = 0;
    var flag = true;
    box.onmouseenter = function (e) {
   
        pos1.style.display = "block";
        pos2.style.display = "block";
        clearInterval(timer);
        timer = null;
    }
    box.onmouseleave = function (e) {
   
        pos1.style.display = "none";
        pos2.style.display = "none";
        timer = setInterval(function (e) {
   
            pos1.onclick();
        }, 2500);
    }
    // 动态获取小圆圈的个数，随之照片的增加而增加
    var ul = document.querySelector("ul");
    var ol = document.querySelector(".circle");
    for (var i = 0; i < ul.children.length; i++) {
   
        var li = document.createElement("li");
        ol.appendChild(li);
        li.setAttribute('index', i)
        // 小圆圈的排他思想
        li.