焦点轮播图（5） 动画函数

目前的效果在切换图片时，left值是直接改变。从第1张图到第2张图left直接从-600变为-1200。现在需要把图片切换设置成动画的效果，使图片的切换更加流畅。

首先在change函数中设置一下一种图片在切换时：位移总时间，位移时间间隔，位移次数：

var time = 300;//位移总时间（ms）
					var interval = 10;//位移间隔时间
					var speed = offset/(time/interval);//每次的位移量   总偏移/次数

之后是动画函数：

function go(){
						if((speed < 0 && parseInt(list.style.left) > newleft)||(speed > 0 && parseInt(list.style.left) < newleft)){
							 list.style.left = parseInt(list.style.left) + speed + 'px';
					           setTimeout(go,interval);//每隔interval执行一次go
						}
					else{
					list.style.left = newleft + 'px';
					
				    if(newleft > -600){//归位
				    	list.style.left = -3000 + 'px';
				    }
				    if(newleft < -3000){
				    	list.style.left = -600 + 'px';
				        }
				      }
					}

注意判断条件写全，向左向右切换均有条件。
在满足条件的情况下，设置定时器定时执行切换函数。当不满足条件时，判断left值溢出归位。

在函数完成后要调用一下，在change( )函数体内添加语句：go( )。

function change(offset){
					var newleft = parseInt(list.style.left) + offset;
					
					var time = 300;//位移总时间（ms）
					var interval = 10;//位移间隔时间
					var speed = offset/(time/interval);//每次的位移量   总偏移/次数
					
					function go(){
						if((speed < 0 && parseInt(list.style.left) > newleft)||(speed > 0 && parseInt(list.style.left) < newleft)){
							 list.style.left = parseInt(list.style.left) + speed + 'px';
					           setTimeout(go,interval);//每隔interval执行一次go
						}
					else{
					list.style.left = newleft + 'px';
					
				    if(newleft > -600){//归位
				    	list.style.left = -3000 + 'px';
				    }
				    if(newleft < -3000){
				    	list.style.left = -600 + 'px';
				        }
				      }
					}
					go();
				}
				

现在可以流畅的切换图片了。
change( )函数完整代码如下：

但是在图片还是切换的过程中，再点箭头按钮换依然会发生切换，如果不停的切换就容易产生卡顿，所以在切换时，点击箭头按钮切换函数无效。

那么就需要在相应的位置设置切换状态值了。
首先在加载结束后，存放一个切换状态值changed：

	var changed = false;//切换状态值无切换

在切换函数的初始 changed 为 true;
在动画函数结束else分支 changed 为 false；
在箭头点击事件时，只有当changed为false时才调用切换函数，添加调用判断：

//右箭头点击事件末尾添加判断
if(！changed){
						change(-600);
					}
//左箭头点击事件末尾添加判断
if(！changed){
						change(-600);
					}

还有小圆点：

//小圆点按钮点击事件末尾添加判断

if(!changed){
					   	change(offset);
					   }

动画函数就完成了！