轮播图的详细解析

轮播图的原理

让一组宽高相同的图片，平铺在一起，设置溢出隐藏，将可见窗口的图片通过偏移量和定时器实现图片的滚动。在平铺图片的首尾添置一样的图片，防止出现空白页，这样看起来是无缝滚动。

• HTML代码：

设置一个可见窗口，用来展示轮播图，并加上左右按钮以及下方的圆点，注意list窗口的获取左距离为图片宽度的负值

<div id="container">
        <div id="list" style="left:-600px">
            <img src="img/4.png"/>
            <img src="img/1.png"/>
            <img src="img/2.png"/>
            <img src="img/3.png"/>
            <img src="img/4.png"/>
            <img src="img/1.png"/>
        </div>
        <div id="buttons">//圆点按钮
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
        </div>
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>//左转
        <a href="javascript:;" id="next" class="arrow">&gt;</a>//右转
    </div>

• css代码：

给可见窗口设置边框，并且设置成溢出隐藏，圆点按钮和左右按钮设置绝对定位，把左右按钮设置为鼠标放上去颜色加深

<style type="text/css">
       *{
        margin: 0;
        padding: 0;
        text-align: none;
       }
       body{
        padding: 20px;
       }
       #container{
        position: relative;
        width: 600px;
        height:400px;
        border: 1px solid #333;
        overflow: hidden;
       }
       #list{
        position: absolute;
        z-index: 1;
        width: 3600px;
        height: 400px;
       }
       #list img{
        float: left;
        width: 600px;
        height: 400px;
       }
       #buttons{
        position: absolute;
        left: 250px;
        bottom: 20px;
        z-index: 2;
        height: 10px;
        width: 140px;
       }
       #buttons span{
        float: left;
        margin-right: 5px;
        width: 10px;
        height: 10px;
        border: 1px solid #fff;
        border-radius: 50%;
        background-color: #333;
        cursor: pointer;
       }
       #buttons .on {
            background:orangered;
        }
      .arrow {
          position: absolute;
          top: 180px;
          z-index: 2;
          display: none;
          width: 40px;
          height: 40px;
          font-size: 24px;
          line-height: 39px;
          text-align: center;
          color: #fff;
          background-color: RGBA(0, 0, 0, .3);
          cursor: pointer;
        }        
        .arrow:hover {
            background-color: RGBA(0, 0, 0, .7);
        }        
        #container:hover .arrow {
            display: block;
        }
        #prev {
            left: 20px;
        }

        #next {
            right: 20px;
        }
    </style>

• js代码

<script type="text/javascript">
  window.onload = function() {      
  //定义需要的全局变量和获取需要使用的元素节点
    var list = document.getElementById('list');
    var prev = document.getElementById('prev');//左箭头
    var next = document.getElementById('next');//右箭头 
    var container = document.getElementById('container');
    var buttons = document.getElementById('buttons').getElementsByTagName('span');
    var index = 1;
    function animate(offset) {
          //获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
          //且style.left获取的是字符串，需要用parseInt()取整转化为数字。
          //offset为传入的数可以确定是左点击还是右点击
          //newLeft:指点击后或者轮播后的相对左边距离
          var newLeft = parseInt(list.style.left) + offset;
          var timer;
         //用于将第一张图和最后一张图连接起来，当到达第四张图时，强制返回第一张
          if(newLeft < -2400) {
              list.style.left = -600 + 'px';
              index = 1;
          } else if(newLeft > -600) {
              list.style.left = -2400 + 'px';
              index = 4;
          } else {
              list.style.left = newLeft + 'px';
          }
          buttonsShow();
      }

    //左（上一张）切换按钮点击事件，点击一次加600
      prev.onclick = function() {
          index -= 1;
          if (index < 1) {
              index = 4;
          }
          buttonsShow();
          animate(600);
      }

    //右（下一张）切换按钮点击事件，点击一次减600
      next.onclick = function() {
          index += 1;
          if (index > 4) {
              index = 1;
          }
          buttonsShow();
          animate(-600);
      }

    //圆点切换图片
      for (var i = 0; i < buttons.length; i++) {
              buttons[i].onclick = function () {
                  /* 偏移量获取：这里获得鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上，去谷歌this的用法  */
                  /* 由于这里的index是自定义属性，需要用到getAttribute()这个DOM2级方法，去获取自定义index的属性*/
                  var clickIndex = parseInt(this.getAttribute('index'));
                  var offset = 600 * (index - clickIndex);
                  animate(offset); //存放鼠标点击后的位置，用于小圆点的正常显示 
                  index = clickIndex;
                  buttonsShow();
              }
      }

      play();
      container.onmouseover = stop;
      container.onmouseout = play;

   //图片自动播放函数,每过1.5秒，触发点击右箭头
  function play() {
      timer = setInterval(function() {
          next.onclick()
      }, 1500)
  }

  //图片暂停播放函数
  function stop() {
      clearInterval(timer);
  }

   //圆点按钮高亮状态切换函数
  function buttonsShow() {
      //这里需要清除之前的样式
      for(var i = 0; i < buttons.length; i++) {
          if(buttons[i].className == 'on') {
              buttons[i].className = '';
          }
      }
      //数组从0开始，故index需要-1
      buttons[index - 1].className = 'on';
   }
}
</script>