DOM中定时器的使用方式、及使用原生JS实现轮播图——大总结（附源码）

一，什么是定时器

在网页的开发中，有一部分效果需要以某种规律不停的显示，比如：轮播图，而这个时候就需要有定时器来完成这个工作（让图片不停的动，实现轮播的效果），简单地说就是，加上定时器之后，先自行设置一个时间，在每次过这个时间的时候，执行一下函数，最终实现的轮播的效果；

JS中定时器有一下两种方式：

1. setInterval() ： 按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。 （相当于循环多次调用函数）
2. setTimeout() ： 在指定的毫秒数后调用函数或计算表达式。 （相当于就调用一次函数）

• setInterval() 语法：

 setInterval(code,millisec,lang)
 //code	必需。要调用的函数或要执行的代码串。
 //millisec	必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
 //lang	可选。 脚本语言可以是：JScript | VBScript | JavaScript

• setTimeout()语法：

setTimeout(code,millisec,lang)
 //code	必需。要调用的函数后要执行的 JavaScript 代码串。
 //millisec	必需。在执行代码前需等待的毫秒数。
 //lang	可选。脚本语言可以是：JScript | VBScript | JavaScript

二，使用原生JS实现轮播图

1. 效果图如下：
   
2. 基本思路：
   在最外层设置一个盒子作为可视化窗口，里面套入一个大盒子保证宽度能够放下6张图片（为了没有明显卡顿的效果在第6张位置再放一张图1），然后把基本样式都设置完成，把左右的按钮用绝对定位在两侧，下面的按钮也绝对定位在右下角，对最外层可视化盒子使用overflow: hidden; 将超出的部分隐藏掉；
3. 详情代码（含注释）如下：

• 基本结构：

<div class="box" id="box">
        <ul id="ulList">
            <li><img src="./imgs/s1.jpg" width="520" height="280" alt=""></li> //设置放图片的盒子长宽
            <li><img src="./imgs/s2.jpg" width="520" height="280" alt=""></li>
            <li><img src="./imgs/s3.jpg" width="520" height="280" alt=""></li>
            <li><img src="./imgs/s4.jpg" width="520" height="280" alt=""></li>
            <li><img src="./imgs/s5.jpg" width="520" height="280" alt=""></li>
            <li><img src="./imgs/s1.jpg" width="520" height="280" alt=""></li>
        </ul>
        <ol id="olList">
            <li class="current">1</li