轮播图这厮是我们浏览网页时常见的一种形式。而相较传统的轮播图而言，呼吸轮播图具有更美观，更cool，更多特效。因而，被老师半强迫的写下了这篇感想。（顺便学一下mark down语法）
限于篇幅和时间，这里就不写css框架和js的动画函数封装（反正我也不会）。
对方并不想和你说话并向你扔了一个代码块：
var carousel=document.getElementById("carousel");//轮播区域
var aLi=document.getElementById("imageslist").getElementsByTagName("li");//需要轮播的图片所在列表
var oLb=document.getElementById("leftBtn");//左侧按钮
var oRb=document.getElementById("rightBtn");//右侧按钮
var cLi=document.getElementById("circles").getElementsByTagName("li");//底下小按钮的列表
//↑我们得到的一系列节点
var idx=0;//信号量
var timer=setInterval(handLer,3500);//创建轮播动画
carousel.onmouseover=function(){
clearInterval(timer);
}
carousel.onmouseout=function(){
timer=setInterval(handLer,3500);
}
//↑鼠标进入和退出时的操作
function handLer(){
if(aLi[idx].isanimated) return;
//对象.isanimated 标记：如果为true，说明它正在执行动画
//这是一个自定义属性，该属性在引入的js文件中被定义
animate(aLi[idx],{"opacity":0},2000);
idx++;
if(idx>aLi.length-1){
idx=0;
}
animate(aLi[idx],{"opacity":1},2000);
changeCircle();
}
//↑这就是轮播动画中的那个函数
oRb.onclick=handLer;
oLb.onclick=function(){
if(aLi[idx].isanimated) return;
animate(aLi[idx],{"opacity":0},2000);
idx--;
if(idx<0){
idx=aLi.length-1;
}
animate(aLi[idx],{"opacity":1},2000);
changeCircle();
}
//↑对左右按钮的操作
for(var i=0;i<cLi.length;i++){
cLi[i].index=i;
cLi[i].onclick=function(){
if(aLi[idx].isanimated) return;
animate(aLi[idx],{"opacity":0},2000);
idx=this.index;
animate(aLi[idx],{"opacity":1},2000);
changeCircle();
}
}
//↑对底下圆点的对应模型
function changeCircle(){
for(var i=0;i<aLi.length;i++){
cLi[i].className="";
}
cLi[idx].className="cur";
}
//↑改变底下圆点样式的函数，一个简单的排他模型
嗯，好吧，我承认我也看不懂。
不过，似乎，好像，大概所有的轮播图都是一个套路，那就是“自动轮播+左右按钮+对应模型+排他模型”，而且他们都会用到轮播动画函数（恕我不知道它的学名是什么，总之大概就是这个意思）。
Ps.由于现在处于学习阶段，我们使用的是老师做的js动画函数封装。
轮播动画函数
毕竟是函数，多少都要有点函数的样子
function handLer(){}
添加一个判断，看动画是否在执行，如果正在执行则跳过
function handLer(){if(aLi[idx].isanimated){return;}
这里的isanimated是我们自己定义的一个属性，用于判断动画是否在执行。aLi[idx].isanimated的初始值为true，当动画执行完成后则变为false。
现在我们可以开始设置动画的属性，改变信号量了
function handLer(){
if(aLi[idx].isanimated){return;}
animate(aLi[idx],{"opacity":0},2000);
idx++;
if(idx>aLi.length-1){
idx=0;
}
animate(aLi[idx],{"opacity":1},2000);
}
其中animate函数也是我们所引入的函数中的（“恕我真的没有那个函数的版权”），其中的三个参数分别是发生改变的元素，元素需要改变的属性，这个改变持续的时长。idx是信号量，初始值是0。
然后我就可以愉快的添加各种事件了:
1.自动轮播事件
var timer=setInterval(handLer,3500);
注意：这里的动画持续时间一定要比上面我们提到的改变持续时间要长，不然天知道又会出什么奇怪的bug；
2.添加鼠标移入和移除事件（求简单也可以不添加这一事件）
carousel.onmouseover=function(){
clearInterval(timer);
}
carousel.onmouseout=function(){
timer=setInterval(handLer,3500);
}
3.添加左右按钮事件
这里我们会惊奇的发现，这下一张的点击事件好像和自轮播的事件是一样的，so
oRb.onclick=handLer
而上一张的点击事件目测和自轮播的事件刚好相反
oLb.onclick=function(){
if(aLi[idx].isandimated) {return;}
animate(aLi[idx],{"opacity":0},2000);
idx--;
if(idx<0){
idx=aLi.length-1;
}
animate(aLi[idx],{"opacity":1},2000);
}
4.添加对应模型
for（var i=0;i<cLi.length;i++）{
cLi[i].index=i;
cLi[i].onclick=function(){
if(aLi[idx].isanimated){return;}
animate(aLi[idx],{"opacity":0},2000);
idx=this.index;
animate(aLi[idx],{"opacity":1},2000);
}
}
值得一提的是this这个东西,在这里的this指的就是被点击的那个小圆点。对于this其他领悟我可能会在未来写一下（但愿我能学会）。
当然，这里的对应模型也可以使用立即执行函数，代码如下：
for(var i=0;i<aLi.length;i++){
(function(i){
cLi[i].onclick=function(){
if(aLi[idx].isanimated) return;
animate(aLi[idx],{"opacity":0},2000);
idx=i;
animate(aLi[idx],{"opacity":1},2000);
changeCircle();
}})(i);
}
5.添加排他模型
排他模型的基本用处就是给下面的小圆点加特效，
function changCircle(){
for(var i=0;i<cLi.length;i++){
cLi[i].className="";
}
cLi[i].className="cur";
}
这样，呼吸轮播图就基本完成了，但我们会惊奇的发现，下面的小圆点并没有和轮播图联动。这里只要把排他模型的函数加到轮播动画函数，上一张的点击事件和对应模型中就好了。
然后，代码就又变回了那个让人看不懂的样子......
