<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

         <style type="text/css">

     * {

         padding: 0;

         margin: 0;

         list-style: none;

         border: 0;

     }

     .all {

         width: 500px;

         height: 200px;

         padding: 7px;

         border: 1px solid #ccc;

         margin: 100px auto;

         position: relative;

     }

     .screen {

         width: 500px;

         height: 200px;

         overflow: hidden;

         position: relative;

     }

     .screen li {

         width: 500px;

         height: 200px;

         overflow: hidden;

         float: left;

     }

     .screen ul {

         position: absolute;

         left: 0;

         top: 0px;

         width: 3000px;

     }

     .all ol {

         position: absolute;

         right: 10px;

         bottom: 10px;

         line-height: 20px;

         text-align: center;

     }

     .all ol li {

         float: left;

         width: 20px;

         height: 20px;

         background: #fff;

         border: 1px solid #ccc;

         margin-left: 10px;

         cursor: pointer;

     }

     .all ol li.current {

         background: yellow;

     }

     #arr {

         display: none;

     }

     #arr span {

         width: 40px;

         height: 40px;

         position: absolute;

         left: 5px;

         top: 50%;

         margin-top: -20px;

         background: #000;

         cursor: pointer;

         line-height: 40px;

         text-align: center;

         font-weight: bold;

         font-family: '黑体';

         font-size: 30px;

         color: #fff;

         opacity: 0.3;

         border: 1px solid #fff;

     }

     #arr #right {

         right: 5px;

         left: auto;

     }

     </style>

 </head>

 <body>

     <div class="all" id='all'>

     <div class="screen" id="screen">

         <ul id="ul">

             <li><img src="data:images/carousel/1.jpg" width="500" height="200" /></li>

             <li><img src="data:images/carousel/2.jpg" width="500" height="200" /></li>

             <li><img src="data:images/carousel/3.jpg" width="500" height="200" /></li>

             <li><img src="data:images/carousel/4.jpg" width="500" height="200" /></li>

             <li><img src="data:images/carousel/5.jpg" width="500" height="200" /></li>

         </ul>

         <ol>

         </ol>

         <div id="arr">

             <span id="left"><</span>

             <span id="right">></span>

         </div>

     </div>

 </div>

 <script>

     //1.获取事件源

     var all = document.getElementById("all");

     var screen = all.firstElementChild || all.firstChild;

     var imgWidth = screen.offsetWidth;

     var ul = screen.firstElementChild || screen.firstChild;

     var ol = screen.children[1];

     var div = screen.lastElementChild || screen.lastChild;

     var spanArr = div.children;

     //2.复制第一张图片所在的li，添加到ul的最后面

     var ulNewLi = ul.children[0].cloneNode(true);

     ul.appendChild(ulNewLi);

     //3.给ol添加li，ul的个数-1个，并点亮第一个按钮

     for (var i = 0; i < ul.children.length - 1; i++) {

         var olNewLi = document.createElement("li");

         olNewLi.innerHTML = i + 1;

         ol.appendChild(olNewLi);

     }

     var olLiArr = ol.children;

     olLiArr[0].className = "current";

     //4.鼠标放到ol的li上，切换图片

     for (var i = 0; i < olLiArr.length; i++) {

         olLiArr[i].index = i;

         olLiArr[i].onmouseover = function(){

             for (var j = 0; j < olLiArr.length; j++) {

                 olLiArr[j].className = "";

             }

             this.className = "current";

             //鼠标放到小的方块上的时候索引值和key以及square同步

             key = square = this.index;

             //移动盒子

             animate(ul,-this.index * imgWidth);

         }

     }

     //5.添加定时器

     var timer = setInterval(autoPlay,1000);

     //固定向右切换图片，两个定时器（一个记录图片，一个记录小方块）

     var key = 0;

     var square = 0;

     function autoPlay(){

         //通过控制key的自增来模拟图片的索引值，然后移动ul

         key ++;

         if (key > olLiArr.length) {

             //图片已经滑动到最后一张，接下来，跳转到第一张，然后在滑动到第二张

             ul.style.left = 0;

             key = 1;

         }

         animate(ul,-key * imgWidth);

         //通过控制square的自增来模拟小方块的索引值，然后点亮盒子

         square ++;

         if (square > olLiArr.length - 1) {

             square = 0;

         }

         for (var i = 0; i < olLiArr.length; i++) {

             olLiArr[i].className = "";

         }

         olLiArr[square].className = "current";

     }

     //鼠标放上去清除定时器，移开后再开启定时器

     all.onmouseover = function(){

         div.style.display = "block";

         clearInterval(timer);

     }

     all.onmouseout = function(){

         div.style.display = "none";

         timer = setInterval(autoPlay, 1000);

     }

     //6.左右切换图片，鼠标放上去显示，移开隐藏

     spanArr[0].onclick = function(){

         //通过控制key的自增来模拟图片的索引值，然后移动ul

         key --;

         if (key < 0) {

             //先移动到最后一张，然后key的值取之前一张的索引值，然后在向前移动

             ul.style.left = -imgWidth * (olLiArr.length) + "px";

             key = olLiArr.length - 1;

         }

         animate(ul, -key * imgWidth);

             //通过控制square的自增来模拟小方块的索引值，然后点亮盒子

         //排他思想做小方块

         square--;

         if (square < 0) { //索引值不能大于等于5，如果等于5，立刻变为0；

             square = olLiArr.length - 1;

         }

         for (var i = 0; i < olLiArr.length; i++) {

             olLiArr[i].className = "";

         }

         olLiArr[square].className = "current";

     }

     spanArr[1].onclick = function() {

         //右侧的和定时器一模一样

         autoPlay();

     }

             function animate(ele, target) {

         clearInterval(ele.timer);

         var speed = target > ele.offsetLeft ? 10 : -10;

         ele.timer = setInterval(function() {

             var val = target - ele.offsetLeft;

             ele.style.left = ele.offsetLeft + speed + "px";

             if (Math.abs(val) < Math.abs(speed)) {

                 ele.style.left = target + "px";

                 clearInterval(ele.timer);

             }

         }, 10)

     }

     //7.

 </script>

 </body>

 </html>