超完整轮播图（自动播放+左右按钮换图+小图标换图）

之前做的轮播图都是把图片放在数组里再循环遍历该数组，这样做出来的轮播图没有图片切换的过程，就总感觉缺了点什么。学习之后，终于把完整的，有切换过程的轮播图做了出来！上代码！

html部分

<div id="box">   <!--最外面的相框-->
    <div id="pictureBox">
        <ul>
            <li><a href=""><img src="images/2.1.jpg"></a></li>
            <li><a href=""><img src="images/2.2.jpg"></a></li>
            <li><a href=""><img src="images/2.3.jpg"></a></li>
        </ul>
        <!--右下角的小图标-->
        <div id="index">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <!--左右按钮-->
        <div id="focus_LR">
            <span id="left">&lt;</span>
            <span id="right">&gt;</span>
        </div>
    </div>
</div>

css部分

* {
      margin: 0;
      padding: 0;
  }

  #box {
      width: 500px;
      height: 350px;
      border: 2px solid grey;
      margin: 100px auto;
      padding: 5px;
  }

  #pictureBox {
      width: 500px;
      height: 350px;
      position: relative;
      overflow: hidden;
  }

  ul {
      width: 500%;    /*注意：ul的宽度一定要足够大，能装下所有图片横着放，否则图片会掉下去*/
      list-style: none;
      position: absolute;
      left: 0;
  }

  li {
      float: left;
  }

  img {
      width: 500px;
      height: 350px;
  }

  #index {
      position: absolute;
      right: 5px;
      bottom: 10px;
  }

  #index span {
      display: inline-block;
      width: 25px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      margin: 0 5px;
      background-color: #5ab0ec;
      color: white;
      cursor: pointer;
  }

  #index .current {
      background-color: #04469c;
  }

  #focus_LR {     /*放左右按钮的div最好不要设置大小，否则可能会覆盖放图片的div*/
      position: relative;
      display: none;
  }

  #focus_LR span {
      display: inline-block;
      width: 50px;
      height: 60px;
      line-height: 55px;
      font-size: 35px;
      color: white;
      cursor: pointer;
      background-color: rgba(0, 0, 0, 0.2);
      padding: 0 10px;
      border-radius: 45%;
      position: absolute;
      top: 140px;
  }

  #focus_LR #left {
      left: -30px;
      text-align: right;
  }

  #focus_LR #right {
      right: -30px;
  }

注意：
1、放图片的ul一定要够宽！！（做的时候一直没有发现这个问题，卡了超级久！果然还是不够仔细啊！π_π）
2、放左右按钮的div最好不要设宽高，最开始设了宽高导致其余div被覆盖了，一些功能都出现了问题，比如图片的超链接没了，小图标的事件没了（点击，进入的都是放按钮的div）

js部分

<script src="common.js"></script> <!--引入的通过id获取标签  my$()-->
<script>
    var pictureBox = document.getElementById("pictureBox"); //或 my$("pictureBox")
    var uls = pictureBox.children[0]; // 或 pictureBox.firstElementChild
    var ind = document.getElementById("index");
    var spans = ind.getElementsByTagName("span");
    var imgWidth = pictureBox.offsetWidth;

	//克隆第一张图片放到最后，用于实现图片无缝循环播放
    uls.appendChild(uls.firstElementChild.cloneNode(true));

    /********************自动播放***********************/
    var timeId = setInterval(move_auto, 2000);     //调用右边按钮的点击事件

    /********************鼠标移到小图标上******************/
    for (var i = 0; i < spans.length; i++) {
        spans[i].setAttribute("index", i);
        spans[i].onmouseover = function () {
            for (var j = 0; j < spans.length; j++) {
                spans[j].removeAttribute("class");
            }
            this.className = "current";
            var num = this.getAttribute("index");
            move(uls, -num * imgWidth);
        }
    }

    /********************左右按钮***********************/
    var count = 0;
    pictureBox.onmouseover = function () {           //鼠标进入图片出现左右按钮
        my$("focus_LR").style.display = "block";
        clearInterval(timeId);
    };
    pictureBox.onmouseout = function () {         //鼠标离开图片左右按钮隐藏
        my$("focus_LR").style.display = "none";
        timeId = setInterval(move_auto, 2000);
    };

    my$("right").onclick = move_auto;    //右边按钮点击事件

    function move_auto() {
        if (count == uls.children.length - 1) {
            uls.style.left = "0px";
            count = 0;
        }
        count++;
        move(uls, -count * imgWidth);
        if (count == uls.children.length - 1) {
            spans[count - 1].className = "";
            spans[0].className = "current";
        } else {
            for (var i = 0; i < spans.length; i++) {
                spans[i].removeAttribute("class");
            }
            spans[count].className = "current";
        }
    }

    my$("left").onclick = function () {   //左边按钮点击事件
        if (count == 0) {
            uls.style.left = -(uls.children.length - 1) * imgWidth + "px";
            count = uls.children.length - 1;
        }
        count--;
        move(uls, -count * imgWidth);
        for (var i = 0; i < spans.length; i++) {
            spans[i].removeAttribute("class");
        }
        spans[count].className = "current";
    };

/**************************指定的元素移动到指定位置************************/
    function move(element, target) {
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            var step = 10;
            var current = element.offsetLeft;

            step = current < target ? step : -step;
            current += step;
            if (Math.abs(current - target) > Math.abs(step)) {
                element.style.left = current + "px";
            } else {
                clearInterval(element.timeId);
                element.style.left = target + "px";
            }
        }, 10);
    }
</script>

其他的比较简单，主要是无缝循环比较复杂，可以通过以下方式实现：

克隆第一张图片放在所有图片的最后，当移动到视觉上的最后一张时，再往后移，此时视觉上已经移到了第一张图，然而实际上是克隆出来的最后一张图，通过count判断是否移到这张克隆图，如果移到了克隆图，则跳到真正的第一张图（uls.style.left = “0px”;），同时让count=0，紧接着count就会+1，然后移到第二张图，这样就实现了循环播放的效果。（这个过程比较考验逻辑，老是被绕晕，这个时候就少不了开发者选项里source调试工具了）

效果演示

（截不出图描述一下好了）
鼠标进入图片时出现左右按钮，并停止自动播放，鼠标移开按钮消失，开始自动播放；
点击左右按钮图片左右切换（循环的），同时小图标相应变化；
鼠标移到小图标上切换到相应的图片。