原生JavaScript实现无缝轮播图

<div id="box">
    <ul>
        <li><img src="img/5.jpg"></li>
        <li><img src="img/1.jpg"></li>
        <li><img src="img/2.jpg"></li>
        <li><img src="img/3.jpg"></li>
        <li><img src="img/4.jpg"></li>
        <li><img src="img/5.jpg"></li>
        <li><img src="img/1.jpg"></li>
    </ul>
</div>

function fnMove(ele, obj,callback) {
    //参数一:需要动态变化样式的元素
    //参数二:一个对象 其 键为需要变化的css属性名,值为css属性目标值 例{fontSize:500,height:140,opacity:50}
    //参数三:回调如果动画结束 调用该函数

    clearInterval(ele.timer);

    //创建计时器动态的修改 目标元素的css属性值
    // 用ele存储timer 目的不让计时器number被释放,导致无法阻止计时器
    ele.timer = setInterval(function () {

        var fnStop = true; //标记 判断是否所有动画都达到目标值

        for (var attr in obj) { //遍历对象 获取到所有需要修改的属性名和目标值
            var curr = 0;
            // 元素当前css属性值 如果属性是opacity 0 - 1
            // 因为我们的速度大于等于1 直接操作0-1小数不太好操作
            // 我们对他进行放大100倍操作
            if(attr == ‘opacity‘){
                curr = parseInt(getStyle(ele, attr)*100)
            }else {
                curr = parseInt(getStyle(ele, attr))
            }

            //定义一个速度 让目标元素 每30毫秒增加5像素 直到达到目标值停止计时器(动画结束)
            //减速运动 目标值(不变) - 减去当前值(越来越接近目标) 减出来的结果越来越小 除以6不要让当前值一瞬间达到目标值
            var speed = (obj[attr] - curr)/6;
            //放大动作  0.3 => 1   -0.3 => -1 避免让速度等于0
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            if(speed != 0){
                fnStop = false;
            }

            // console.log(curr);
            //动态改变css属性值  如果是透明度 我们之前给他乘以100倍 这里需要还原回0-1的数
            if(attr == ‘opacity‘){
                ele.style[attr] = parseFloat((curr + speed)/100);
                //透明度兼容写法 老版本浏览器透明度为0-100
                ele.style.filter = ‘alpha(opacity:‘+(curr + speed)+‘)‘
            }else {
                ele.style[attr] = curr + speed + ‘px‘
            }

        }
        //所有动画完成，调用回调函数（可选）
        if (fnStop){
            clearInterval(ele.timer);
            if(callback){
                callback();
            }
        }
    }, 30)

function getStyle(ele, sAttr) {
    //参数一：需要获取的元素对象
    //参数二：需要获取的样式属性
    //兼容写法获取 元素css样式的值
    //高版本浏览器getComputedStyle(元素，伪类),不是伪类设为null,返回的是一个CSS样式声明对象
    if (window.getComputedStyle) {
        sAttr = window.getComputedStyle(ele, null)[sAttr];
    } else {
        //低版本浏览器
        sAttr = ele.currentStyle(sAttr);
    }
    return sAttr
}

 //通过js获取图片/li的宽度,得到每次轮播移动多少像素
 var imgWidth = liList[0].offsetWidth;
 //定义当前轮播图的下标(用来记录下一次该展示第几张图片)
 var index = 1; // 图片从第一张开始 index==0 其实是最后一张图片
 //页面小圆点高亮的下标
 var num = 0;
 //开始进行轮播
 box.timer = setInterval(showRight, 2000);

function showRight() {
    index++;
    num++;
    if (num >= spans.length) { //spans为与展示图片数量相同的小点数组
    num = 0;
    }
    if (index >= liList.length) { //上一次已经展示了第一张(li最后一张)了,该展示第二张
     // 直接设置css属性left 是没有动画效果的 无缝的让最后一张跳回 第1张
    ul.style.left = -imgWidth + ‘px‘;
    //改变index值 动画效果的让第一张移动到第二张
    index = 2;
    }
    fnMove(ul, {left: -imgWidth * index})
    activeSpan(num);  //点亮与图片相对应的小圆点
}

//高亮小圆点方法
function activeSpan(num) {
    for (var i = 0; i < spans.length; i++) {
    spans[i].className = ‘‘;
    }
    spans[num].className = ‘bgcolor‘
}

left.onclick = function (e) {
     //阻止事件冒泡的兼容写法
      e = e || window.event;
      window.event ? e.cancelBubble = true : e.stopPropagation();
      clearInterval(box.timer);
      showLeft();
      }

 right.onclick = function (e) {
       e = e || window.event;
       window.event ? e.cancelBubble = true : e.stopPropagation();
       clearInterval(box.timer);
       showRight();
       }

//给小圆点添加点击
function spansClick() {
    for (var i = 0; i < spans.length; i++) {
        //记录每个小圆点的下标
        spans[i].index=i;
        spans[i].onclick = function (e) {
            e = e || window.event;
            window.event ? e.cancelBubble = true : e.stopPropagation();
            //读取每个小圆点的下标
            num = this.index;
            index = num + 1; //index永远比num大1
            activeSpan(num);
            fnMove(ul, {left: -imgWidth * index})
        }
    }
}