轮播图分为：传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。它们各具特色，各有用处。
1.传统轮播图
第一步，得到元素
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个函数 move
function move() {
// 1. 更新位置
oDiv.style.left = x + "px";
// 2. 修改x的值
x += -10;
if (x < -maxLeft) {
x = 0
}
}
其他相关
1.cloneNode
cloneNode()是DOM中Node对象的方法，使用cloneNode可以方便的复制DOM节点。
cloneNode() 方法可创建指定的节点的精确拷贝。
cloneNode() 方法 拷贝所有属性和值。
该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。
单击按钮将项目从一个列表复制到另一个列表中
点我<
function myFunction(){
var itm=document.getElementById("myList2").lastChild;
var cln=itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
}
尝试更改deep参数为假，只有一个空的li元素将被克隆