不瞒大家说，轮播图简直是我的噩梦，就像是论文之于大学生[受虐滑稽][受虐滑稽]

简单轮播图

最简单的轮播图，用WebAPI做的，点击图片底下的数字跳转到相对应的图片。

1、首先把结构写出来

<div class="box" id="box">
  <div class="inner">
    <ul>
      <li><a href="#"><img src="http://hbimg.b0.upaiyun.com/074d5ab1e10bb890a8088867bd1bc7f6ca09272a19f114-J0kTnl_fw658" alt=""/></a></li>
      <li><a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542521291&di=1be438987e94a93cb5d77d4384f28f58&imgtype=jpg&er=1&src=http%3A%2F%2Fimgcache.cjmx.com%2Fstar%2F201608%2F20160823141712357.jpg" alt=""/></a></li>
      <li><a href="#"><img src="http://upload.taihainet.com/2016/0807/1470581312169.gif?size=500x300" alt=""/></a></li>
     
    </ul>
    <div class="square">
      <span class="current">1</span>
      <span>2</span>
      <span>3</span>
    
    </div>
  </div>
</div>

2、添加style样式

<style>
    * {
      margin: 0;
      padding: 0
    }
    ul {
      list-style: none
    }
    img {
      vertical-align: top
    }
    .box {
      width: 500px;
      height: 300px;
      margin: 100px auto;
      padding: 5px;
      border: 1px solid #ccc;
    }
    .inner {
      width: 500px;
      height: 300px;
      background-color: pink;
      overflow: hidden;
      position: relative;
    }
    .inner ul {
      width: 1000%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .inner li {
      float: left;
    }
    .square {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }
    .square span {
      display: inline-block;
      width: 16px;
      height: 16px;
      background-color: #fff;
      text-align: center;
      line-height: 16px;
      cursor: pointer;
    }
    .square span.current {
      background-color: orangered;
      color: #fff;
    }
  </style>

3、script

<script>
  //1 获取元素
  var box = document.getElementById("box");
  var inner = box.children[0];//可视区域
  var list = inner.children[0];//要运动的列表
  var spans = inner.children[1].children;//要操作的所有按钮
  var imgWidth = inner.offsetWidth;//获取了可视区域的宽度
  
  //2 步骤分析：
  //2.1点击spans进行操作
  //2.2 点击按钮变色效果
  //2.3 设置list的运动位置
  
  //点击按钮1  left为  - 0 * 图宽
  //点击按钮2  left为  - 1 * 图宽
  //点击按钮3  left为  - 2 * 图宽
  
  //通过观察我们发现，list要设置的left值为  - 按钮索引值 * 图片宽度
  
  
  //3 具体操作
  //遍历
  for (var i = 0; i < spans.length; i++) {
    spans[i].index = i;
    spans[i].onclick = function () {
      //点击按钮变色
      for (var i = 0; i < spans.length; i++) {
        spans[i].className = "";
      }
      this.className = "current";
      
      //根据规律设置运动位置
      animate(list, -this.index * imgWidth);
      
    };
  }
  
  
  function animate(element, target) {
    clearInterval(element.timer);//清除旧的定时器，保证匀速运动，防止加速效果
    element.timer = setInterval(function () {
      //1 获取元素当前位置 使用offsetLeft属性
      var current = element.offsetLeft;
      //2 设置步长，随意设置，不过最好是整数
      var step = 17;
      //根据当前位置和目标位置的大小关系进行判断
      step = target > current ? step : -step;
      //5 运动条件设置
      //检测当前位置和目标位置之间的距离，如果满足一个step的距离，可以运动，否则直接运动到目标位置，结束
      if (Math.abs(target - current) > Math.abs(step)) {
        //3 设置运动公式:元素位置(新) = 元素位置(旧) + 步长;
        current = current + step;
        //4 设置给元素的left值运动
        element.style.left = current + "px";
      } else {
        //6 让element直接运动到目标位置，再清除定时器
        element.style.left = target + "px";
        clearInterval(element.timer);
      }
    }, 20);
  }
</script>

差不多该写的都写上了，这是我第一个轮播图，最简单、最低级的轮播图，适合小小白看，这几天还会更新其他的轮播图。