<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>轮播图</title>
    <style media="screen">
    * {
        margin: 0;
        padding: 0;
      }
    #sliderWrap {
        position: relative;
        margin: 0 auto;
        width: 730px;
        height: 454px;
        margin-top: 200px;
        overflow: hidden;
      }
 
      #sliderContent {
        position: absolute;
        height: 100%;
        left: -730px;
      }
      #sliderContent a {
        float: left;
        display: inline-block;
        height: 100%;
      }
 
      #sliderNumber {
        position: absolute;
        top: 420px;
        left: 290px;
      }
      #sliderNumber ul {
        display: flex;
        width: 150px;
        justify-content: space-between;
        list-style-type: none;
        cursor: pointer;
      }
      #sliderNumber ul li {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: rgb(62, 62, 62);
        color: white;
        text-align: center;
        line-height: 20px;
      }
      .button {
        position: absolute;
        top: 200px;
        width: 30px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background: rgba(0, 0, 0, 0.2);
        color: white;
        font-size: 32px;
        cursor: pointer;
        display: none;
      }
      #sliderBtnRight {
        left: 700px;
      }
    </style>
  </head>
  <body>
    <div class="slider_wrap" id="sliderWrap">
      <div class="slider_content" id="sliderContent">
        <a href="#" target="_blank"><img src="images/006.jpg" alt="" /></a>
        <a href="#" target="_blank"><img src="images/001.jpg" alt="" class="show"/></a>
        <a href="#" target="_blank"><img src="images/002.jpg" alt="" class="show"/></a>
        <a href="#" target="_blank"><img src="images/003.jpg" alt="" class="show"/></a>
        <a href="#" target="_blank"><img src="images/004.jpg" alt="" class="show"/></a>
        <a href="#" target="_blank"><img src="images/005.jpg" alt="" class="show"/></a>
        <a href="#" target="_blank"><img src="images/006.jpg" alt="" class="show"/></a>
        <a href="#" target="_blank"><img src="images/001.jpg" alt="" /></a>
      </div>
      <div id="sliderNumber">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
        </ul>
      </div>
      <div class="button" id="sliderBtnLeft">
        &lt;
      </div>
      <div class="button" id="sliderBtnRight">
        &gt;
      </div>
    </div>
  </body>
  <script src="tween.js" charset="utf-8"></script>
  <script type="text/javascript">
    var sliderWrap = document.getElementById('sliderWrap');
    var sliderContent = document.getElementById('sliderContent');
    var sliderBtnLeft = document.getElementById('sliderBtnLeft');
    var sliderBtnRight = document.getElementById('sliderBtnRight');
    var aTags = document.getElementsByTagName('a');
    // querySelector和querySelectorAll是通过css选择器来选取对应的标签或者符合条件的标签
    var lis = document.querySelectorAll('#sliderNumber li'); //获取li数组
    var imgs = document.querySelectorAll('.show');//获取除了第一张和最后一张之外的图片
    // 1、根据图片的数量重新定义content的宽度
    sliderContent.style.width = aTags[0].offsetWidth * aTags.length + 'px';
    // 2、对slierWrpt进行鼠标移入移出事件添加 ;鼠标移入left、right按钮显示,移出隐藏
    sliderWrap.onmouseenter = function() {
      sliderBtnLeft.style.display = 'block';
      sliderBtnRight.style.display = 'block';
    }
    sliderWrap.onmouseleave = function() {
      sliderBtnLeft.style.display = 'none';
      sliderBtnRight.style.display = 'none';
    }
    /* 3、对鼠标移入,移出left、right按钮添加事件;鼠标移入到sliderBtnLeft,sliderBtnRight时
       自动播放停止;鼠标移出时自动播放开始 */
  sliderBtnLeft.onmouseenter = function() {
     clearInterval(timerOutter);
   }
   sliderBtnLeft.onmouseleave = function() {
     timerOutter = setInterval('animateMove(lastIndex + 1, 1 ,true)',2000);
   }
   sliderBtnRight.onmouseenter = function() {
     clearInterval(timerOutter);
   }
   sliderBtnRight.onmouseleave = function() {
     timerOutter = setInterval('animateMove(lastIndex + 1, 1 ,true)',2000);
   }
    /* 4、对鼠标点击left、right按钮添加点击事件;点击sliderBtnLeft时,停止自动播放,图片向右移动,
    点击sliderBtnRight时,停止自动播放,图片向左移动*/
    sliderBtnLeft.onclick = function() {
      clearInterval(timerOutter);
      animateMove(lastIndex - 1, -1, false);
      lastIndex--;
    }
    sliderBtnRight.onclick = function() {
      clearInterval(timerOutter);
      lastIndex = animateMove(lastIndex + 1, 1, false);
      lastIndex++;
    }
    // 其次定义轮播图必备的变量
    var t = 0;// current times, 当前执行动画的次数
    var b = 0; // begin value, 起始值
    var c = -730; //change in value, 变化值
    var d = 70; // duration,持续时间
    var timer; // 自动轮播定时器
    var timerOutter; //定时器
    var lastIndex = 0; //上一个显示的图片在数组中的下标
    /*5、对鼠标放入数组lis中添加事件;鼠标放入lis中停止自动播放,左右按钮隐藏,且显示当前图片
    鼠标移开lis中先清理定时器,左右按钮显示,恢复自动播放*/
    for (var i = 0; i < lis.length; i++) {
      // 给每个li标签设定自定义属性index,记录其在数组中的下标
      lis[i].index = i;
      lis[i].onmouseenter = function() {
        clearInterval(timerOutter);
        sliderBtnLeft.style.display = 'none';
        sliderBtnRight.style.display = 'none';
        animateMove(event.target.index, event.target.index - lastIndex, false);
      }
      lis[i].onmouseleave = function() {
        clearInterval(timerOutter);
        sliderBtnLeft.style.display = 'block';
        sliderBtnLeft.style.display = 'block';
        lastIndex = event.target.index;
        timerOutter = setInterval('animateMove(lastIndex + 1, 1, true)', 2000)
      }
    }
    /*6、对lis数字标签颜色处理,显示当前图片时背景变为红色,其他的为灰色
    */
    function showCurrentNumberTag(index) {
      for (var i = 0; i < lis.length; i++) {
        lis[i].style.background = 'rgb(62,62,62)';
      }
      lis[index].style.background = 'rgb(180,30,30)'; // 根据传入的下标更改当前数字标签颜色
    }
    // 调用函数,初始为index为0;
    showCurrentNumberTag(0);
    /*
      7、 定义位移动画函数
    currentIndex:当前需要执行位移动画的图片的下标
    count:一共有多少张图片需要一次执行位移动画
    isAuto:是否是自动轮播,即定时器调用还是手动点击
    */
    function animateMove(currentIndex,count,isAuto) {
      // 为了确保不出错,每次位移动画时先清除定时器
      clearInterval(timer);
      b = -730 * (lastIndex + 1);
      c = -730 * count;
      function move() {
        t++;
        sliderContent.style.left = Tween.Linear(t,b,c,d) + 'px';
        if (t == d) {
          clearInterval(timer);
          t = 0; //复位
        }
      }
      timer = setInterval(move,1); // 启动定时器timer
      /*判断图片移动到最左边和最右边时修改,
      当图片移动到最左边时,修改数字标签颜色,把左边的图片移动到右边上一张图片为最后一张,即lastIndex = [5];
      当图片移动到最右边时,修改数字标签颜色,把右边的图片移动到左边上一张图片为最后一张,即lastIndex = [0];
      其他情况图片展示为当前index;
       */
      if (currentIndex == -1) {
        showCurrentNumberTag(imgs.length - 1);
        sliderContent.style.left = -730 * imgs.length + 'px';
        lastIndex = imgs.length;
      } else if (currentIndex == imgs.length) {
        showCurrentNumberTag(0);
        sliderContent.style.left = -730 + 'px';
        lastIndex = isAuto ? 0 : -1;
      } else {
        showCurrentNumberTag(currentIndex);
        if (isAuto) {
          lastIndex++;
        }
      }
      return lastIndex;
    }
    // 启动定时器
    timerOutter = setInterval('animateMove(lastIndex + 1, 1 ,true)',1000);
  </script>
</html>