下午,应PD需求,写了个轮播滚动的javascript。可以四个方向进行轮播。
一直在追求规范的代码书写和风格。
现阶段的水平,可能就是这样了。以此为始,继续精进。。。
求拍砖,万分荣幸。 :D
废话不多说,贴代码:
一直在追求规范的代码书写和风格。
现阶段的水平,可能就是这样了。以此为始,继续精进。。。
求拍砖,万分荣幸。 :D
废话不多说,贴代码:
(function(app) {
app.roll = function(list, opt) {
return new roll(list, opt);
};
function roll(list, opt) {
this.config = $.extend({}, roll.DEF, opt);
this.list = list.css(roll.ABL);
this.show = list.hide().eq(this.config.index).css(roll.BLOCK);
this.num = list.length;
//run
this.run();
}
/**
* 静态变量
*/
roll.DEF = {index:0,time:3000,speed:500,coord:"top"};
roll.BLOCK = {display:"block"};
roll.ABL = {position:"absolute"};
roll.REV = {position:"relative"};
roll.TURN = {top:0,bottom:1,left:2,right:3};
roll.CSS = {left:0,top:0};
/**
* 启动 计时
*/
roll.prototype.run = function() {
var _this = this,config = _this.config;
_this.init();
_this.interval = window.setInterval(function() {
var next = _this.list.eq(config.index + 1);
if (next.length) {
config.index += 1;
} else {
config.index = 0;
next = _this.list.eq(config.index);
}
_this.turnDown(_this.fixedLoc(next));
}, _this.config.time);
};
/**
* 初始化数据
*/
roll.prototype.init = function() {
var _this = this,config = _this.config,cssShow = {display:"block",left:0,top:0},down = {};
_this.show.parent().css(roll.REV);
switch (roll.TURN[config.coord]) {
case 0:cssShow.top = config["height"] = 0 - _this.show.height();break;
case 1:cssShow.top = config["height"] = _this.show.height();break;
case 2:cssShow.left = config["width"] = 0 - _this.show.width();break;
case 3:cssShow.left = config["width"] = _this.show.width();break;
default:throw new Error("error Param: coord");
}
this.cssShow = cssShow;
//设置 滚动方向======================
if (this.cssShow.left == 0) {
if (this.cssShow.top > 0) {
down.top = "+=" + Math.abs(this.cssShow.top) + "px"
} else {
down.top = "-=" + Math.abs(this.cssShow.top) + "px"
}
this.cssShow.top = 0 - this.cssShow.top;
} else {
if (this.cssShow.left > 0) {
down.left = "+=" + Math.abs(this.cssShow.left) + "px"
} else {
down.left = "-=" + Math.abs(this.cssShow.left) + "px"
}
this.cssShow.left = 0 - this.cssShow.left;
}
this.config.down = down;
};
/**
* 定位 nextUnit
*/
roll.prototype.fixedLoc = function (obj) {
var _this = this;
obj.css(_this.cssShow);
return obj;
};
/**
* 播放动画
*/
roll.prototype.turnDown = function (obj) {
var _this = this,config = _this.config;
_this.show.add(obj).animate(config.down, config.speed, function() {
_this.reset(obj);
});
};
/**
* 重置
*/
roll.prototype.reset = function (obj) {
var _this = this;
_this.list.hide();
_this.show = obj.css(roll.BLOCK);
};
})(window.App);