Jaskアニメーション切り替えプラグインの一つ

5090 ワード

/**
 * @author han jin zi
 * http://www.jask.cn/plugin
 */
(function(window, undefined) {

  var Jask = (function() {

    // Define a local copy of Jask
    var Jask = function(defaults, context) {

      return new Jask.fn.init(defaults);
    };

    Jask.fn = Jask.prototype = {
      constructor : Jask,
      init : function(defaults) {

        if( typeof defaults == 'undefined') {

          return this;
        }

        //         
        this.i = 0;
        //      
        this.img_Width = defaults.img_Width || 301;
        //     
        this.obj = defaults.obj;
        //         
        this.total = defaults.total || this.obj.find(".flash").find("li").length || 0;
        //       
        this.timeLag = defaults.timeLag || 3000;
        //       
        this._setInterval = null;
        //        
        this.slow = defaults.slow || "slow";
        //     
        this.events = defaults.events || "click";
        //       
        this.auto = defaults.auto || false;
        //     
        this.handle = defaults.handle || "flash";
        
        this.left = defaults.left;
        
        this.right = defaults.right;
        
        this.showNum = defaults.showNum || 0;

        if(this.total > 1) {
          this.loading();
        }

      },
      loading : function() {

        var _this = this;

        //     
        var _flash_li = this.obj.find(".flash").find("li");

        //Setting picture attributes
        _flash_li.each(function(i, data) {

          $(data).css({
            "position" : "absolute",
            "left" : (i * Number(_this.img_Width))
          });
          //    li   id  
          $(data).attr("class", "flash-num-" + i);
          //    li   id  
        });
          
        //     
        var _btn_a = this.obj.find(".btn").find("a");

        if(_btn_a.length > 0) {
  
          // Setting Button attributes
          _btn_a.each(function(i, data) {
            $(data).attr("flash-btn-num", i);
            //    li   id  
          });
  
          /**
           *           
           */
          _btn_a.bind(this.events, function() {//      
  
            _this[_this.handle]($(this).attr("flash-btn-num"));
          });
        
        }
        
        if(this.left !== undefined) {
          
          /*
           *       
           */
          this.obj.find("." + this.left).bind(this.events, function() {
            
            _this[_this.handle]("left");
          });
        }
        
        if(this.right !== undefined) {
          /*
           *       
           */
          this.obj.find("." + this.right).bind(this.events, function() {
            
            _this[_this.handle]("right");
          });
        }

        this.setInterval(this.timeLag);

        return this;

      },
      setInterval : function(timeLag) {

        if(this.auto) {

          window.clearInterval(this._setInterval);

          var _this = this;

          this._setInterval = window.setInterval(function() {
            _this[_this.handle]('setInterval');
          }, timeLag);

        }

        return this;
      },
      scroll : function(direction) {
        
        if(direction === 'left' && this.i < (this.total - this.showNum)) {
          
          this.i = this.i + 1;
         }
         
        if(direction === 'right' && this.i > 0) {
          
          this.i = this.i - 1;
         }

         this.obj.find(".flash").animate({marginLeft : -(this.i * this.img_Width)+"px"}, this.slow);
      },
      flash : function(next_num) {

        if(next_num == this.i)
          return;
        //             

        if(next_num == "setInterval") {

          next_num = Number(this.i) + 1;

          if(Number(next_num) >= Number(this.total)) {
            next_num = 0;
          }

        } else {

          //       
          this.setInterval(this.timeLag);
        }

        //     
        this.obj.find(".btn").find("a").removeClass("on").eq(next_num).addClass("on");
        //     
        var oCurr = this.obj.find(".flash").find(".flash-num-" + this.i), oNext = this.obj.find(".flash").find(".flash-num-" + next_num);
        //          
        //       
        oCurr.after(oNext.css({
          left : (this.img_Width)
        }));
        //                              
        //     
        oCurr.animate({
          left : -this.img_Width
        }, this.slow).next().animate({
          left : 0
        }, this.slow);
        //          301px       0px  
        //       
        this.i = next_num;
        //               i

        return this;
      }
    };

    Jask.fn.init.prototype = Jask.fn;

    return Jask;

  })();

  window.Jask = window.j = Jask;

})(window);