轮播图

轮播图分为：
传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。

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}}