`
ghyghoo8
  • 浏览: 190272 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

一个轮播滚动的js

    博客分类:
  • js
阅读更多
下午,应PD需求,写了个轮播滚动的javascript。可以四个方向进行轮播。

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

求拍砖,万分荣幸。

废话不多说,贴代码:

(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);
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics