原生js实现动态轮播图

用html+css和简单的js代码，实现一个有导航栏的原生js动态轮播图。

1. 自己动手用原生js写了一个简单的轮播图，js代码只有40多行，没有复杂的逻辑和各种难懂的函数，对初学者和小白比较友好。
2. 主功能要逻辑有：1.鼠标划过整个容器时停止自动播放，2.鼠标离开整个容器时继续播放至下一张，3. 遍历所有数字导航实现划过切换至对应的图片，4.创造图片切换函数，实现轮播图的隐藏和展示。
3. 为了方便阅读和理解，我把一个完整的代码拆成了HTML，css,js三部分展示，代码中配有比较详细的注释。需要用时，直接复制粘贴各部分代码，再结合起来用即可。
4. 最后，我再提供一个极简的js轮播图代码，用几行代码就实现图片动起来。欧力给！！

html部分代码，有个div包裹整个轮播图

  <div id="wrap">
      
      <div>
        <ul id="pic">
          <li><img src="./IMAGE/xy-1.jpg" alt="图片" />li>
          <li><img src="./IMAGE/xy-2.jpg" alt="图片" />li>
          <li><img src="./IMAGE/xy-3.jpg" alt="图片" />li>
          <li><img src="./IMAGE/xy-4.jpg" alt="图片" />li>
          <li><img src="./IMAGE/xy-5.jpg" alt="图片" />li>
        ul>
      div>
      
      <div>
        <ol id="list">
          <li class="on">1li>
          <li>2li>
          <li>3li>
          <li>4li>
          <li>5li>
        ol>
      div>
    div>

css代码块部分

js代码块部分。图片切换函数changePic(),自动播放函数autoPlay()

<!-- js -->
<script>
  window.onload = function() {
    //获取属性
    var wrap = document.getElementById("wrap"),
      pic = document.getElementById("pic").getElementsByTagName("li"),
      list = document.getElementById("list").getElementsByTagName("li"),
      index = 0, //检索初值为0
      timer = null; // 先把定时器清空

    // 定义并调用自动播放函数
    timer = setInterval(autoPlay, 2000);

    // 鼠标划过整个容器时停止自动播放
    wrap.onmouseover = function() {
      clearInterval(timer);
    };
    // 鼠标离开整个容器时继续播放至下一张
    wrap.onmouseout = function() {
      setInterval(autoPlay, 2000);
    };

    // 遍历所有数字导航实现划过切换至对应的图片
    for (var i = 0; i < list.length; i++) {
      list[i].onmouseover = function() {
        clearInterval(timer); //暂停轮播
        index = pic.length; //给检索赋值
        changePic(index); //切换到对应图片
      };
    }

    //自动播放函数
    function autoPlay() {
      if (++index >= pic.length) index = 0; //超出图片数，则回到第一张
      changePic(index); //调用切换函数
    }

    //创造图片切换函数,curIndex为形参
    function changePic(curIndex) {
      for (var i = 0; i < pic.length; ++i) {
        pic[i].style.display = "none"; //隐藏图片
        list[i].className = ""; //导航条
      }
      pic[curIndex].style.display = "block"; //展示图片
      list[curIndex].className = "on";
    }
  };
</script>

最后，这是极简版代码，实现图片轮播

var pic = document.getElementById("pic").getElementsByTagName("li"),
  index = 0;
function auto() {
for (var i = 0; i < pic.length; i++) {
     pic[i].style.display="none" ;
     };
      pic[index].style.display="block" ;
      if (++index>= pic.length) index = 0;
    }
    setInterval(auto, 2000);