<script>
     window.onload = function() {
         var oWrap = document.getElementById("wrap");
         var oBox = document.getElementById("box");
         var aBox = oBox.getElementsByTagName("li");
         var aBtn = document.getElementById("btn").getElementsByTagName("li");
         var oPrev = document.getElementById("prev");
         var oNext = document.getElementById("next");
         var iNow = 0;
         var timer = null;

         oBox.innerHTML += oBox.innerHTML;
         oBox.style.width = aBox[0].offsetWidth * aBox.length + "px";

         function tab(){
             for(var i=0;i<aBtn.length;i++){
                 aBtn[i].className = "";
             }
             move(oBox,{left:-aBox[0].offsetWidth*iNow});
             //判断iNow是否大于红色圆扭得个数，若大于则需减去按钮的个数
             if(iNow > aBtn.length-1){  //next中的情况，主要出现的是oBox后面的li
                 aBtn[iNow-aBtn.length].className = "active";
             }else{  //prev中的情况，主要出现的是oBox前面的li
                 aBtn[iNow].className = "active";
             }
         }

         //next，当循环到最后一张图片时，返回到前面与它相同的那张图片
         function next(){
             iNow++;
             if(iNow >aBox.length - 1){
                 oBox.style.left = -oBox.offsetWidth/2 +aBox[0].offsetWidth + "px";
                 iNow = aBtn.length;
             }
             tab();
         }

         //prev，当循环到第一张图片时，返回到后面与它相同的那张图片
         oPrev.onclick = function(){
             iNow--;
             if(iNow <0){
                 oBox.style.left = -oBox.offsetWidth/2 + "px";
                 iNow = aBtn.length - 1;
             }
             tab();
         }

         oNext.onclick = next;

         timer = setInterval(next,2000);
         oWrap.onmouseout = function(){
             clearInterval(timer);
             timer = setInterval(next,2000);
         }
         oWrap.onmouseover = function(){
             clearInterval(timer);
         }
     }
 </script>