Sublime Text
01首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示
02然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头
03接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明
04最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能
05最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图
三个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()实现一个轮播图
![php时间问题？mysql数据库的时间格式（Y-M-D H:I:S） 在PHP页面想这样显示（Y-M-D） ('.$rows['ndate'].')](/aiimages/php%E6%97%B6%E9%97%B4%E9%97%AE%E9%A2%98%EF%BC%9Fmysql%E6%95%B0%E6%8D%AE%E5%BA%93%E7%9A%84%E6%97%B6%E9%97%B4%E6%A0%BC%E5%BC%8F%EF%BC%88Y-M-D+H%3AI%3AS%EF%BC%89+%E5%9C%A8PHP%E9%A1%B5%E9%9D%A2%E6%83%B3%E8%BF%99%E6%A0%B7%E6%98%BE%E7%A4%BA%EF%BC%88Y-M-D%EF%BC%89+%28%26%23039%3B.%24rows%5B%26%23039%3Bndate%26%23039%3B%5D.%26%23039%3B%29.png)
