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><li>2</li><li>3</li><li>4</li><li>5</li></ol><a href=\"javascript:;\" class=\"leftBtn\" id=\"leftBtn\"></a> //左按钮<a href=\"javascript:;\" class=\"rightBtn\" id=\"rightBtn\"></a> //右按钮</div>

• css样式：

<style>*{ margin: 0; padding: 0; }li{ list-style: none; }.box{overflow: hidden;width: 520px;height: 280px;border: 1px solid red;margin: 100px auto;position: relative;}.box ul{width: 3120px;position: absolute;left: 0;top: 0; }.box ul li{ float: left; }.box ol {position: absolute;right: 10px;bottom: 10px; }.box ol li{float: left;width: 20px;height: 20px;line-height: 20px;text-align: center;border: 1px solid #fff;color: #999;background-color: #333;border-radius: 50%;cursor: pointer;margin-left: 10px;}.box ol li.current{ border-color: #f60; color: #f60; }.leftBtn, .rightBtn{position: absolute;width: 40px;height: 100px;background: url(\"./imgs/index.png\") no-repeat 0 0;top: 50%;margin-top: -50px;}.leftBtn{left: 0;}.rightBtn{right: 0;background-position: -50px 0;}</style>

• JS代码块：

<script src=\"./js/animate.js\"></script>  //引入封装好的实现轮播的方法；<script>//获取页面中的各个元素var box = document.getElementById(\"box\");var leftBtn = document.getElementById(\"leftBtn\");var rightBtn = document.getElementById(\"rightBtn\");var ulList = document.getElementById(\"ulList\");var olList = document.getElementById(\"olList\");var timer = null;let olNum = 0; // 小圆点的计数器let ulNum = 0; // 装图片的盒子的计数器function move(){olNum++;ulNum++;if(ulNum > 5){ulList.style.left = \"0px\"; // 最最核心，当页面图片轮播到最右面的时候，给它瞬间置为零位置（最左边）ulNum = 1;}if (olNum > 4){olNum = 0; // 重置计数器}for (let i = 0; i < olList.children.length; i++) {olList.children[i].className = \"\";}olList.children[olNum].className = \"current\";let move = ulNum * -520;animateMoudle.init(ulList,move)}// 点击右边的按钮rightBtn.onclick = move;// 点击左边的按钮leftBtn.onclick = function () {olNum--;if(olNum<0){olNum = 4;}ulNum--;if(ulNum<0){ulNum = 4;ulList.style.left = \"-2600px\"}for (let i = 0; i < olList.children.length; i++) {olList.children[i].className = \"\";}olList.children[olNum].className = \"current\";let move = ulNum * -520;animateMoudle.init(ulList,move)  //引用之前封装好的方法  实现轮播}// 点击小圆点for (let i = 0; i < olList.children.length; i++) {olList.children[i].onclick = function () {for (let j = 0; j < olList.children.length; j++) {olList.children[j].className = \"\";}this.className = \"current\";let move = -520 * i;animateMoudle.init(ulList,move)  //引用之前封装好的方法  实现轮播olNum = i;ulNum = i;}}function autoMove(){timer = setInterval(move,2000);}// 实现自动轮播autoMove();box.onmouseover = function () {clearInterval(timer)}box.onmouseout = function () {autoMove();}</script>

• 封装好的方法：

let animateMoudle = (function () {/**  功能：让一个盒子水平运动起来*  参数1：盒子   参数2：目标位置* */function animate(obj, target) {clearInterval(obj.timer); // clearInterval(und) 也不会报错obj.timer = setInterval(function () {let step = 40; // 步长let current = obj.offsetLeft; // 得到盒子相对于参考点的偏移量step = target >= current ? step : -step;  // 此时step要么是正10  要么是-10if (Math.abs(target - current) >= Math.abs(step)) {// 距离目标的距离 至少还大于一个步长current += step;obj.style.left = current + \"px\";console.log(\".......6666.....\")} else {// 距离目标的距离 已经小于了一个步长obj.style.left = target + \"px\";clearInterval(obj.timer);}}, 17)}return {init:animate,}})();