JS轮播工具

105 阅读2分钟

直接步入正题:

这是一个封装的轮播小组件

/*
 * 可以用来获取任意的样式
 */
function getStyle(obj, name) {

	return window.getComputedStyle && getComputedStyle(obj, null)[name] || obj.currentStyle[name];
}

/*
 * 提取出一个函数,可以处理一些简单的动画效果
 * 参数:
 * 		obj: 要执行动画的元素
 * 		attr: 执行动画是要修改的属性
 * 		target: 执行动画的目标位置
 * 		speed: 执行动画的速度
 * 		callback: 回调函数,这个函数将会在动画执行完毕之后被调用
 */
function move(obj, attr, target, speed, callback) {
        // 如果没有该对象则返回
        if (!obj) return;
	//开启定时器前,关闭上一个
	/*
	 * 这里我们的timer是一个全局变量,所有的动画执行时,都会共享同一个timer
	 * 	这样将会导致我们执行box2的动画时,会使box1的动画也立即终止
	 * 	所以我们定时器的标识不能作为全局变量保存,而应该保存到要执行动画的对象上
	 */
	clearInterval(obj.timer);

	//获取当前值,动画执行的起始位置
	var current = parseInt(getStyle(obj, attr));
	//起始位置   大于  目标位置 speed为负
	//起始位置  小于 目标位置 speed为正
	if(current > target) {
		//此时speed应该是负数
		speed = -speed;
	}

	//开启一个定时器,用来移动box1
	obj.timer = setInterval(function() {
		//获取box1的left属性值
		var oldValue = parseInt(getStyle(obj, attr));
		//修改值
		var newValue = oldValue + speed;
		//如果newValue大于800
		//如果向右移动,则newValue > target  speed为正
		//如果向左移动,则newValue < target  speed为负
		if(speed > 0 && newValue > target || speed < 0 && newValue < target) {
			newValue = target
		}
		//将其赋值给box1
		obj.style[attr] = newValue + "px";
		//当运行800px时,停止执行动画
		if(newValue == target) {
			clearInterval(obj.timer);
			//动画执行完毕,调用回调函数
			callback && callback();

		}

	}, 30);
}

/*
 * 定义一个函数,专门用来为一个元素添加class属性值
 * 参数
 * 	obj 要添加class属性的元素
 * 	cn 要添加的class的值
 * 	
 */
function addClass(obj, cn) {

	//判断obj中是否含有cn这个class
	if(!hasClass(obj, cn)) {
		obj.className += " " + cn;
	}

}

/*
 * 判断一个对象中是否含有指定的class属性
 * 	参数:
 * 		obj:要检查的对象
 * 		cn:要检查class值
 * 如果对象中具有该class则返回true,否则返回false
 */
function hasClass(obj, cn) {

	//检查obj中是否与b2这个class
	//var reg = /\bb2\b/;
	var reg = new RegExp("\\b" + cn + "\\b");

	return reg.test(obj.className);

}

/*
 * 删除一个元素中的class
 */
function removeClass(obj, cn) {

	//创建一个正则表达式
	var reg = new RegExp("\\b" + cn + "\\b");

	//将class属性中符合正则表达式的内容,替换为空串
	obj.className = obj.className.replace(reg, "");

}

/*
 * 切换一个元素的class属性值
 * 	如果有,则删除
 * 	如果没有,则添加
 */
function toggleClass(obj, cn) {
	//判断obj中是否有cn
	if(hasClass(obj, cn)) {
		//如果有,则删除
		removeClass(obj, cn);
	} else {
		//如果没有,则添加
		addClass(obj, cn);
	}
}