JS_简易轮播图

轮播器01.gif

核心代码：

<script>
  
  //1. 找对象
  var box = document.getElementById("box");
  var ad = box.children[0];
  var arr = document.getElementById("arr");
  var leftArr = document.getElementById("left");
  var rightArr = document.getElementById("right");
  var ul = document.getElementById("imgList");
  var lis = ul.children;
  
  var timer;
  
  //2. 给box注册onmouseover事件，让arr显示
  box.onmouseover = function () {
      arr.style.display = "block";
      
      //清除定时器
    clearInterval(timer);
  }
  
  //3. 给box注册onmouseout事件，让arr隐藏
  box.onmouseout = function () {
      arr.style.display = "none";
  
    timer = setInterval(function () {
      rightArr.onclick();
    }, 1000);
  }
  
  //4. 给右箭头注册点击事件
  var count = 0;
  rightArr.onclick = function () {
    //点一次，就要往左边移动一张图片
    //如果发现现在是最后一张图片，悄悄摸摸的假图片顺便变成了真图片
    if(count >= lis.length - 1){
      //不结束，瞬间拉回去,把假图片顺便变成了真图片
      count = 0;
      ul.style.left = "0px";
    }
    
    //目的：往左移动一张图片
    count++;
    var target = - count * ad.offsetWidth;
    animate(ul, target);
  }
  
  //5. 给左箭头注册点击事件
  leftArr.onclick = function () {
    if(count <= 0){
      //悄悄摸摸的把真图片换成假图片
      count = lis.length - 1;
      ul.style.left = - count * ad.offsetWidth + "px";
      
    }
  
    count--;
  
    var target = - count * ad.offsetWidth;
  
    animate(ul, target);
  }
  
  //开一个定时器，每隔2秒钟点一次
  timer = setInterval(function () {
      rightArr.onclick();
  }, 1000);
</script>