呼吸轮播图实现及问题解决方法

一、实现

     呼吸轮播相比于传统轮播，只是增加了渐变的效果，采用淡入淡出的方法，让图片切换时有一个动态的过程，提高用户体验。具体实现过程如下。
    1、为了实现淡入淡出的动画效果，首先我们需要引入之前封装的运动函数，代码如下：

 <script src="animate-2.0.1.js"></script>

  2、引入代码之后我们开始写轮播效果实现的代码，首先我们实现左右两个按钮点击切换图片的过程，代码：

oNext.onclick = function(){
     
  //函数节流，当图片在切换时，点击不会执行后面的代码
    if(imgLi[num].isanimated) return;

    animate(imgLi[num] , {"opacity":0} , 1000);         
        numLi[num].style.backgroundColor = "orange";
    if (num == 4)
    {
        num = -1;                                                   
        }
            
    num++;
    animate(imgLi[num] , {"opacity":1} , 1000)
    numLi[num].style.backgroundColor = "red";
}

oPrev.onclick = function(){

    if(imgLi[num].isanimated) return;
    animate(imgLi[num] , {"opacity":0} , 1000);
        numLi[num].style.backgroundColor = "orange";
        if (num == 0)
        {
            num = 5;                            
        }

        num--;

        animate(imgLi[num] , {"opacity":1} , 1000);
        numLi[num].style.backgroundColor = "red";
    } 

   在这段代码中我们实现了点击两边按钮切换图片的功能，为了实现淡入淡出的效果，我们需要让上一张图片淡入，当前图片淡出。我们定义了一个变量作为图片的下标，点击是进行自增或者自减。这里需要注意的是变量num变化代码的位置，必须在图片淡入和淡出代码之间，这样才能实现上一张图片淡入，当前图片淡出的效果。
   当点击的间隔时间快于运动函数传入的时间时，图片的切换会变得很乱，因此我们调用了运动函数中定义的isAnimate属性，当为true时，点击无效。

   2、接下来我们需要实现图片的自动切换，为了达到自动切换的效果，我们需要设置一个定时器，来实现代码的自动执行。具体实现如下：

var timer = setInterval(function(){

        if(imgLi[num].isanimated) return;

    animate(imgLi[num] , {"opacity":0} , 1000);
    numLi[num].style.backgroundColor = "orange";
    if (num == 4)
    {
        num = -1;                                           
    }
            
    num++;
    animate(imgLi[num] , {"opacity":1} , 1000)
    numLi[num].style.backgroundColor = "red";
}
oDiv.onmouseover = function(){
        
    clearInterval(timer);
}
oDiv.onmouseout = function(){
        
    timer = setInterval(function(){
        //move函数我们后面会封装，这里回了节省代码，先写上去       
        move();
    },2000)
}

  3、自动做切换的效果实现后，只需要实现点击下方原点切换到对应的图片，这个呼吸轮播就实现了。代码如下：

for (var i=0; i<numLi.length; i++)
    {
        numLi[i].index = i;

        numLi[i].onclick = function(){
                
            if(imgLi[num].isanimated) return;
            animate(imgLi[num] , {"opacity":0} , 1000);
            numLi[num].style.backgroundColor = "orange";

            num = this.index;
                
            animate(imgLi[num] , {"opacity":1} , 1000);
            numLi[num].style.backgroundColor = "red";
                
        }
    }

   在实现 下方小圆点的颜色切换时，我们平时可能用的比较多的是排他模型，先让所有的圆点都变成原始颜色，再让我们当前点击的圆点变色。在这里我们也可以使用将上一次点击的圆点变成原始颜色，当前点击的圆点变色的方式。

   4、重复代码的封装，完成上一步之后，我们整个呼吸轮播就写完了，但是上述的实现过程出现了大量的重复代码，这是我们就可以运用之前学习的函数知识，将重复的代码封装到一个函数之中，需要的时候调用函数就可以。

   function move(){
        
        if(imgLi[num].isanimated) return;

        animate(imgLi[num] , {"opacity":0} , 1000);
        numLi[num].style.backgroundColor = "orange";
        if (num == 4)
        {
            num = -1;                                           
        }
            
        num++;
        animate(imgLi[num] , {"opacity":1} , 1000)
        numLi[num].style.backgroundColor = "red";
    }

   这里我们将重复的代码封装在一个名为move的函数中，在程序代码中需要的地方可直接调用。

二、遇到的问题及解决方法

   在整个程序实现的过程中，我发现当点击速度过快时图片会乱，一开始我以为是当前图片显示时上一张图片还未隐藏所造成的，于是我将图片隐藏运动函数传入的时间参数设置为0，代码如下：

animate(imgLi[num] , {"opacity":0} , 0);
    numLi[num].style.backgroundColor = "orange";
    if (num == 4)
    {
        num = -1;                                           
    }
            
    num++;
    animate(imgLi[num] , {"opacity":1} , 1000)

   这样设置之后，点击速度过快确实不会再出现图片混乱的情况，但是当点击到最后一张图片时再点击不再切换。经过检查发现，时间设置为0时，运动函数并没有执行，造成每一张图片透明度都为1的情况。最后我调用了运动函数中提供的函数节流属性isAnimate属性解决了这个问题。