无缝滚动轮播图

最近看到好多撸原生轮播图的博客，我也来一发有一段时间没写了。

 html 部分

<div class="all" id='box'>
    <div class="screen">
        <ul>
            <li><img src="img/wf1.jpg" width="500" height="200"/></li>
            <li><img src="img/wf2.jpg" width="500" height="200"/></li>
            <li><img src="img/wf3.jpg" width="500" height="200"/></li>
            <li><img src="img/wf4.jpg" width="500" height="200"/></li>
            <li><img src="img/wf5.jpg" width="500" height="200"/></li>
        </ul>
        <ol>  // 等下用Js动态来生成序号
        </ol> 
    </div>
    <div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>

css 部分

<style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }
        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }
        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }
        .screen ul {
            position: absolute;
            left: 0;
            top: 0;
            width: 3000px;
        }
        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }
        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }
        .all ol li.current {
            background: yellow;
        }
        #arr {
            display: none;
            z-index: 1000;
        }
        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }
        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>

js 部分

  先封装一个动画 下面用得到。

function animate(element,target,temp) {
      clearInterval(element.timerId);   // 保证只开启一个定时器
      var current;
      element.timerId = setInterval(function (){
          current = element.offsetLeft;
          if (current > target) {  // 如果当前位置大于目标位置，每次移动的距离取负
              temp = - Math.abs(temp)
         }
          if(Math.abs(current - target) <= Math.abs(temp)) { 
              clearInterval(element.timerId);
              element.style.left = target + 'px'
          }
          current += temp;
          element.style.left = current + 'px'
      },10)
  }

轮播部分

  // 获取元素
    var box = document.getElementById('box');
    var screen = box.querySelector('.screen');
    var ul = screen.querySelector('ul');
    var ol = screen.querySelector('ol');
    // 箭头
    var arr = document.getElementById('arr');
    var arrLeft = document.getElementById('left');
    var arrRight = document.getElementById('right');
    // 图片宽度
    var imgWidth = screen.offsetWidth;
// 1.动态生成序号        
    var len = ul.children.length;
    for (var i = 0; i < len; i++) {
        var li = document.createElement('li');
        li.innerText = i + 1;
        ol.appendChild(li);
// 2.点击序号 动画方式 切换图片        
        li.onclick = liClick;
        li.index = i;          // 让当前li 记录它的索引
    }
    function liClick() {
        for (var i = 0; i < len; i++) {  // 排他思想，先取消所有li的高亮显示，给当前li添加高亮显示
            var li = ol.children[i];
            li.className = '';
        }
        this.className = 'current';
        var liIndex = this.index;
        animate(ul, -this.index * imgWidth, 10);
        index = liIndex;               //  全局变量 index 和 li 里面的index保持一致
    }
    ol.children[0].className = 'current';  // 默认序号1高亮显示
// 3.鼠标放到盒子上显示箭头
    box.onmouseenter = function () {
        arr.style.display = 'block';
        clearInterval(timerId)          // 清除定时器
    };
    box.onmouseleave = function () {
        arr.style.display = 'none';
        timerId = setInterval(autoPlay, 2000)
    };
// 4.上一张,下一张    
    var autoPlay = function () {
        if (index === len) {    // 判断是否是克隆的第一张图，如果是修改ul的坐标，显示真正的第一张图
            ul.style.left = '0px';
            index = 0
        }
        index++;
        if (index < len) {
            ol.children[index].click()      // 获取图片对应的序号，让序号点击
        } else {
            animate(ul, -index * imgWidth, 10);  // 如果是最后一张，以动画的形式移动到克隆的第一张
            for (var i = 0; i < len; i++) {
                var li = ol.children[i];
                li.className = ''
            }
            ol.children[0].className = 'current'
        }
    };
    var index = 0;   // 第一张图片的索引
    arrRight.onclick = function () {
        autoPlay()
    };
    arrLeft.onclick = function () {
        if (index === 0) {    // 如果是第一张就偷偷的切换的最后一张图片位置（克隆的第一张图片）
            index = len;
            ul.style.left = -index * imgWidth + 'px' 
        }
        index--;
        ol.children[index].click()
    };
    var firstLi = ul.children[0].cloneNode(true);  // 实现无缝滚动的关键，
    ul.appendChild(firstLi);
// 5.自动切换图片    
    var timerId = setInterval(autoPlay, 2000)