一个轮播滚动的js

下午,应PD需求,写了个轮播滚动的javascript。可以四个方向进行轮播。

一直在追求规范的代码书写和风格。
现阶段的水平,可能就是这样了。以此为始,继续精进。。。

求拍砖,万分荣幸。 :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);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值