【JavaScript轮播图函数封装】JavaScript动画，轮播图。

JavaScript轮播图函数封装

话不多说上代码：

// obj为目标对象，target为目标位置，callback为回调函数，如果没有回调函数可以不写。
		function animate(obj,target,callback) {
			// 清除以前的定时器，保证只有一个定时器在工作
			clearInterval(obj.timer);
			obj.timer= setInterval(function(){
				// 步长值计算
				var step=(target-obj.offsetLeft)/10;
				// 把步长值转化为整数
				step = step>0 ? Math.ceil(step) : Math.floor(step);
				// 定时器结束条件
				if(obj.offsetLeft == target){
					// 停止动画
					clearInterval(obj.timer);
					if(callback){
						callback();//停止动画后要执行的函数
					}
				}
		// 注意，必须要添加定位才能使用，因为是通过left的值来运动
				obj.style.left = obj.offsetLeft + step + 'px';
			}, 15);
		}

调用方法：

<div id="ss"></div>

css部分：

#ss{
				position: absolute;
				left: 0;
				width: 200px;
				height: 200px;
				background-color: aqua;
				top: 60px;
			}

function write(){
	alert('我停下来');	
}//回调函数，动画停止后执行，可以不要
var move=document.querySelector('#ss');//获取对象
	animate(move, 1200,write);//对象添加动画

得到下图：

由于封装函数的定时器时间为15毫秒，效果不明显，上图是改成150毫秒后的效果