简单轮播图运动函数封装

###代码如下：

/**
	 * 运动
	 * @param element 待添加运动动画效果的 DOM 元素对象
	 * @param options 多属性目标终值选项
	 * @param speed 限定运动的总时间
	 * @param fn 在运动结束后需要继续执行的函数 
	 */
	function animate(element, options, speed, fn) {
		// 清除元素上已有的运动动画计时器
		clearInterval(element.timer);

	// 多属性初值、范围值
	var start = {}, range = {};
	for (var attrName in options) {
		start[attrName] = parseFloat(css(element, attrName));
		range[attrName] = options[attrName] - start[attrName];
	}

	// 记录开始运动的时间
	var startTime = +new Date();

	// 启动计时器，实现运动动画效果：将计时器 id 缓存
	element.timer = setInterval(function() {			
		// 计算已经运动的时间
		var elapsed = Math.min(+new Date() - startTime, speed);

		// 多属性按公式运算：线性运动
		for (var attrName in options) {
			// 公式：结果 = 运动时间 * 总范围 / 总时间 + 起始
			var result = elapsed * range[attrName] / speed + start[attrName];
			// 设置CSS
			element.style[attrName] = result + ("opacity" === attrName ? "" : "px");
		}

		// 判断是否停止计时器
		if (elapsed === speed) {
			clearInterval(element.timer);
			// 如果有运动结束后需要继续执行的函数，则调用函数执行
			fn && fn();
		}
	}, 1000/60);
}

/**
 * 淡入
 * @param element 待添加淡入动画效果的 DOM 元素对象
 * @param speed 限定运动的总时间
 * @param fn 在运动结束后需要继续执行的函数 
 */
function fadeIn(element, speed, fn) {
	element.style.display = "block";
	element.style.opacity = 0;
	animate(element, {opacity: 1}, speed, fn);
}

/**
 * 淡出
 * @param element 待添加淡出动画效果的 DOM 元素对象
 * @param speed 限定运动的总时间
 * @param fn 在运动结束后需要继续执行的函数 
 */
function fadeOut(element, speed, fn) {
	element.style.display = "block";
	element.style.opacity = 1;
	animate(element, {opacity: 0}, speed, function() {
		element.style.display = "none";
		fn && fn();
	});
}