关于呼吸轮播图

轮播图这厮是我们浏览网页时常见的一种形式。而相较传统的轮播图而言，呼吸轮播图具有更美观，更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";
}

这样，呼吸轮播图就基本完成了，但我们会惊奇的发现，下面的小圆点并没有和轮播图联动。这里只要把排他模型的函数加到轮播动画函数，上一张的点击事件和对应模型中就好了。
然后，代码就又变回了那个让人看不懂的样子......