轮播图分为：
传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。
1.传统轮播图
<div id="box"></div>
<div id="leftbtn"></div>
<ul>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
第一步，得到元素
var a = document.getElementById("box");
var left = document.getElementById("leftbtn");
var circles = document.getElementById("circles");
var b = document.getElementsByTagName("ul");
var c = document.getElementsByTagName("ol");
var bs = document.getElementsByTagName("li");
// 得到个数
var length = bs.length;
// 克隆
bs.cloneNode(true);
// 添加元素
document.appendChild();
// 定义信息量
var idx=0;
第二步，设置定时器
var t = setInterval()
// 鼠标移上
（onmouseover）
鼠标移开
（onmouseout）
// 清除定时器
clearInterval(t);
第三步，监听（左右及小圆点）按钮事件
left.onclick = function(){
//函数截流
// 对象.isanimated 标记： 如果为true，说明它正在执行动画; 对象.xxx undefined,
// 假的if(b.isanimated) return;
//信号量的变化idx++;
//改变小圆点changeCircles();
//运动机构的移动animate(bs,{"属性（left）" : -设置（options）.宽（width） * idx}, 设置动画时间 ；
//根据信号量设置小圆点时建议用【排他模型】
//更换小圆点函数function changeCircle(){
//去掉所有小圆点的cur for (var i = 0; i < circlesLi.length; i++) {circlesLi[i].className = ""; }//第信号量这个小圆点加cur circlesLi[idx].className = "cur";}
2.间歇轮播图思路：
(1)得到元素
(2)复制一份到html
(3)定时器
setInterval(function(){ 设置样式 变化量 判断},
1000 // 间隔时间)
3.呼吸轮播图(和传统轮播图写法相似)
/* 思路：
1. 透明度 animate(物体, {"opacity": 1}, 1000) 不透明animate(物体, {"opacity": 0}, 1000) 透明
2. 切换
（1） 定时器
（2） 定时器函数中：-1 其他所有的变成透明（动画）-2 当前的变成不透明（动画）*/
// 得到元素后直接设置属性值//图片数量var imgLength = lis.length;
//图片宽度var width = 560;//滚动速度var animatetime = 600;
//缓冲描述var tween = "Linear";
//间隔时间var interval = 2000;
// 定义信息量 var idx = 0;
与传统轮播图不同的是：呼吸轮播加opacity（透明度）；
//原来的信号量的图片淡出 animate(lis[idx],{"opacity" : 0},1000); 透明//信号量改变 idx = this.index;
//新信号量的图片淡入 animate(lis[idx],{"opacity" : 1},1000); 不透明
4.无缝轮播图思路：
获取子元素，然后在定时器中，定时更新子元素的
// 整个页面加载完成window.onload = function() {
1.得到物体
2.鼠标移开，创建定时器3.鼠标移上，清除定时器
// 再复制1份oUl.innerHTML += oUl.innerHTML
// 保存位置var x = 0;// 定义1个函数 movefunction move() {
// 1. 更新位置oDiv.style.left = x + "px";
// 2. 修改x的值x += -10;if (x < -maxLeft) {x = 0}}
