三个div，最外层id为 parent 的大div内包含了 uls 和 buttons 两个div，div uls 中包含了两个列表 img_ul （图片列表）, litCir_ul （小圆点列表），div buttons 里则包含了“左”， “右”两个按钮。
之所用js添加小圆点，是因为小圆点的数量是由图片张数决定的。
默认 li 的 class 为 quiet , 第一张默认为 active 。
首先先理解该轮播图如何滚动，这里是通过控制 img_ul 的 left 值来控制显示某张图片， 为了实现“滚动”的效果，我们需要 逐渐 改变 img_ul 的 left 值，而不能直接使该值变化图片宽度的倍数。这里我们定义一个动画效果函数 Roll() 。
试想下面的情况，当图片从最后一张切换到第一张时，这时就不能通过逐渐改变 img_ul 的 left 值来实现滚动的效果，于是 克隆第一张图片至列表尾部，当滚动完最后一张图片时，继续滚动到克隆的第一张，然后将 img_ul 的 left 值置为0。
需要注意的是小圆点和图片列表的 li 数目是不一样的，当滚动到最后一个克隆项时，此时小圆点实际上在第一个位置。
开始自动滚动：
timer = setInterval(autoRun, gap)
给每个小圆点绑定了onmouseover事件，这个方法有个细节，会根据两次小圆点的距离差调整速率为 rate*times ，使切换效果更自然（也就是说每次切换说花的时间基本一致，无论是第一张到第二张，还是第一张到最后一张）。
触及区域，清除定时器，显示按钮。
离开区域，添加定时器，隐藏按钮。
自动播放就是间隔一定时间不断调用函数“下一张”的过程，所以这里的按钮 right 下一张的实现就是上面的 autoRun 函数。
以上就是轮播图各部分的实现原理，如果你有其他的方法，欢迎一起交流！
2019.3.30更新：
用requestAnimationFrame()实现一个轮播图
1 、 首先我们需要在开始时将我们锁需要的封装函数链接进来。列如<script type="text/javascript" src="animate-2.0.1.js"></script>
而且我们必须得得到所有需要用到的对象用 getElementById 、getElementsByTagName，然后把需要一个规范的命名。
2 、第二部我们创建一个定时器先让轮播图中所有图片的 li 动起来
右边点击函数跟定时器所运动的函数一个样，所以我们可以封装一个函数abc（）；他们是共用的；
3 、 写出左边点击按钮事件的函数，这样就如上abc（）；差不多只是修改一些东西就行了；
4 、讲小圆点的样式改变封装成一个函数就是下面的chnage（）；
然后还得监听点击每个小圆点的事件，所以可以用for + onclick 讲每个小圆点点击事件给写出来。
难点：
1 、函数截留，当我们点击函数正在执行时，如果多次点击就会出现图片运动混乱的现象，这是我们需要用if(picDiv.isanimated) {return}，
2 、cloneNode（）函数picUl.appendChild(picLi[0].cloneNode(true))
