一、实现
呼吸轮播相比于传统轮播，只是增加了渐变的效果，采用淡入淡出的方法，让图片切换时有一个动态的过程，提高用户体验。具体实现过程如下。
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属性解决了这个问题。
网友评论