用JS实现点击按钮动画移动的轮播图

我在 ul 里装了所有的轮播图（每个 li 对应一张图），所以点击按钮的时候只要让 ul 左右移动就ok啦~

动画移动的效果其实就是利用定时器将某个图片移动到一个指定的位置，下面我用JS写了一个这样的动画函数，调用时只要传进去一个移动元素（这里我用的是 ul ）和该元素的目标位置即可。

注：

• 把 ul 作为移动元素时，ul 必须要脱离文档流--------- 方法： position:absolute;

• 同时要获取 ul 的当前位置（距离左侧）
  -----------------方法：移动元素.offsetLeft （可以根据自己的需要定，具体可以查W3cschool），这得到的值一个数字类型，无 px。

点击按钮动画轮播代码

    /**********************点击左右按钮动画轮播************************/
    var scrollUl = document.getElementById("scroll-ul");  //ul里装了所有的轮播图
    var scrollLis = scrollUl.getElementsByTagName("li"); //每个轮播图
    var next = document.getElementsByClassName("next")[0]; //右侧按钮
    var prev = document.getElementsByClassName("prev")[0]; //左侧按钮
   
   //点击右侧按钮 
    next.onclick = function () {
    //判断ul距离左测的位置------offsetLeft
        if (scrollUl.offsetLeft == 0) { 
        //这里调用的下面的动画封装函数，让移动元素向左移动163px
            animateMove(scrollUl, -163);
        } else if (scrollUl.offsetLeft == -163) {
            animateMove(scrollUl, -326);
        } else if (scrollUl.offsetLeft == -326) {
            animateMove(scrollUl, 0);
        }
    }
    
      //点击左侧按钮 
    prev.onclick = function () {
        if (scrollUl.offsetLeft == 0) {
            animateMove(scrollUl, -326);
        } else if (scrollUl.offsetLeft == -163) {
            animateMove(scrollUl, 0);
        } else if (scrollUl.offsetLeft == -326) {
            animateMove(scrollUl, -163);
        }
    }

封装一个动画函数：任意一个函数移动到指定的目标位置

/**********************  任意一个函数移动到指定的目标位置  ************************/

function animateMove(element, target) {
    //先清理定时器（为了保证每次调用的都是同一个定时器 或者说 无论点多少次按钮都只调用一个定时器）
    clearInterval(element.timeId);
    //启动一个定时器，定时器的Id值存储到了一个对象的属性中
    element.timeId = setInterval(function () {
        var current = element.offsetLeft;//获取当前ul的位置(数字类型)
        var step = 10;
        step = target - current > 0 ? step : -step; //决定左右移动方向
        current += step; //当前移动到的位置
        if (Math.abs(target - current) > Math.abs(step)) { //与目标的距离 > 每次移动的step
            element.style.left = current + "px";
        } else { //马上到达目标了（与目标的距离 < step）
            clearInterval(element.timeId);  //清理定时器
            element.style.left = target + "px"; //直接到达目标位置
        }
    }, 10);
}