插件总结

　一、新闻轮播插件

1、引入jquery和gslide插件

1 <script type="text/javascript" src="jquery-1.8.3.js"></script>
2 <script type="text/javascript" src="gslide.js"></script>

以下是gslide插件代码

/**
 * 澶氬浘婊氬姩鎻掍欢
 *
 * @module gSlider
 * @author liuqing
 */
;(function($) {
    /**
    * gSlider绫?(姝ょ被鏄鏈夌被锛岃皟鐢ㄩ渶瑕佷娇鐢‥xample涓殑鏂规硶)111111
    *
    *
    * @class gSlider
    * @param {Object} element 瀹炰緥鍖栧璞″湪姝om瀵硅薄鍐呮墽琛?
    * @param {Object} options 鍙傛暟
    * @example
        $(xx).gSlider({
            isAuto: true,                     // 鏄惁鑷姩婊氬姩
            isImgLoad: false,                // 鏄惁鍥剧墖鍚庡姞杞?
            dataOriginal: ‘data-original‘,  //鍥剧墖瀛樺偍灞炴€у悕
            speed: 3000,                 // 闂撮殧鏃堕棿锛堟绉掞級
            direction: ‘forward‘,           // 鍚戝墠 -  forward / 鍚戝悗 - backward
            duration: 500,                     // 绉诲姩閫熷害锛堟绉掞級
            showNum: 1,                     // 鏄剧ず涓暟
            stepLen: 1,                     // 姣忔婊氬姩姝ラ暱
            type: ‘horizontal‘,             // 姘村钩婊氬姩 - horizontal / 鍨傜洿婊氬姩 - vertical
            btnGo: {left: null, right:null},
            beforeCallback: function(){},
            afterCallback: function(){}
        });
    * @constructor
    */
    function gSlider(element, options) {
        this.elements = {
            wrap: element,
            ul: element.children(‘ul‘),
            li: element.children(‘ul‘).children(‘li‘)
        };
        this.len = this.elements.li.length;
        this.settings = options;

        this.pos = this.index = 0;

        this.timer = null;
        this.init();
    }
    gSlider.prototype = {
        /**
         * @method 鍒濆鍖?
         */
        init: function() {
            var self = this;
            self.elements.ul.append(self.elements.ul.html());
            self.settings.beforeCallback.call(self);
            self.setStyle();
            self.move();
            self.bind();
            self.settings.afterCallback.call(self);
            self.whenhover();
            self.imgLoad();
        },
        setStyle: function(){
            var self = this;
            switch (self.settings.type) {
                case ‘horizontal‘:
                    self.leftOrTop = ‘left‘;
                    self.oneWidth = self.settings.oneWidth ? self.settings.oneWidth : self.elements.li.eq(0).outerWidth();
                    self.elements.ul.width(self.oneWidth * self.len * 2);
                    break;
                case ‘vertical‘:
                    self.leftOrTop = ‘top‘;
                    self.oneWidth = self.settings.oneWidth ? self.settings.oneWidth : self.elements.li.eq(0).outerHeight();
                    self.elements.li.css({
                        ‘float‘: ‘none‘,
                        ‘display‘: ‘block‘
                    });
                    self.elements.ul.height(self.oneWidth * self.len * 2);
                    break;
            };
            self.wraperSize = self.oneWidth * self.len;
            self.stepWidth = self.oneWidth * self.settings.stepLen;
            self.elements.ul.css({
                position: ‘relative‘
            });
        },
        bind: function(){
            var self = this;
            debugger;
            $(self.settings.btnGo.left).bind(‘click‘, function (){
                clearInterval(self.timer);
                self.index++;
                self.moving(self.elements.ul[0], -self.stepWidth*self.index, function(){
                    self.move();
                });
            });
            $(self.settings.btnGo.right).bind(‘click‘, function (){
                clearInterval(self.timer);
                self.index--;
                if (self.index<0) {
                    if (self.index === -1) {
                        self.pos = -self.stepWidth * self.len;
                    };
                    self.index = self.len + self.index;
                };
                self.moving(self.elements.ul[0], -self.stepWidth*self.index, function(){
                    self.move();
                });
            });
        },
        move: function(){
            var self = this;
            if (self.settings.isAuto) {
                self.timer = setInterval(function(){
                    self.index++;
                    self.moving(self.elements.ul[0], -self.stepWidth*self.index);
                }, self.settings.speed);
            }
        },
        moving: function(obj, iTarget, callback){
            var self = this;
            self.imgLoad();
            callback = callback || function(){}
            clearInterval(obj.tLimer);
            obj.tLimer = setInterval(function (){
                var speed = (iTarget-self.pos)/6;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if(self.pos == iTarget){
                    clearInterval(obj.tLimer);
                    callback();
                }

                self.pos += speed;

                obj.style[self.leftOrTop] = (self.pos % self.wraperSize)+‘px‘;

            }, 30);
        },
        whenhover:function(){
            var self = this;
            self.elements.ul.hover(function(){
                clearInterval(self.timer);
            },function(){
                self.move();
            });
        },
        /**
         * @method 鍥剧墖鍔犺浇
         */
        imgLoad: function(){
            var self = this;
            if(!self.settings.isImgLoad){return false}
            var len = Math.abs(self.index % self.len) *  self.settings.showNum;
                liNode = self.elements.ul.children().slice(len, len + self.settings.showNum);
            liNode.each(function(){
                var imgNode = $(this).find(‘img‘);
                if(imgNode.attr(self.settings.dataOriginal)){
                    imgNode.attr(‘src‘, imgNode.attr(self.settings.dataOriginal)).removeAttr(self.settings.dataOriginal);
                }
            });

        }
    };

  $.fn.gSlider = function(options) {
      options = $.extend({}, $.fn.gSlider.defaults, options);
      this.each(function(){
          new gSlider($(this), options);
      });
  };
  /**
   * @property 榛樿閰嶇疆
   * @type {Object}
   *
   */
  $.fn.gSlider.defaults = {
      oneWidth: null,
      isAuto: true,                     // 鏄惁鑷姩婊氬姩
      isImgLoad: false,                // 鏄惁鍥剧墖鍚庡姞杞?
      dataOriginal: ‘data-original‘,  //鍥剧墖瀛樺偍灞炴€у悕
      speed: 3000,                 // 闂撮殧鏃堕棿锛堟绉掞級
      direction: ‘forward‘,           // 鍚戝墠 -  forward / 鍚戝悗 - backward
      duration: 500,                     // 绉诲姩閫熷害锛堟绉掞級
      showNum: 1,                     // 鏄剧ず涓暟
      stepLen: 1,                     // 姣忔婊氬姩姝ラ暱
      type: ‘horizontal‘,             // 姘村钩婊氬姩 - horizontal / 鍨傜洿婊氬姩 - vertical
      btnGo: {left: null, right:null},
      beforeCallback: function(){},
      afterCallback: function(){}
  };
})(jQuery);

2、编写HTML

　　注意必须写id

1     <div id="notice-c" class="notice-c">
2         <ul>
3             <li><a href="#">管理平台运行支撑技术系统示目通过验收</a><time class="time">[2016-02-05]</time></li>
4             <li><a href="#">管理平台运行支撑技术系统示范工程项目通过验收</a><time class="time">[2016-02-05]</time></li>
5             <li><a href="#">考字化管理平台运行支撑技术目通过验收</a><time class="time">[2016-02-05]</time></li>
6     </div>

3、调用js插件

　　这个插件自带有点击跳转新闻前后的按钮，需要给他class名，向前为bprve,向后为bnext;

　　调用记住left:‘.bnex‘，right:‘.bprve‘

        $(function(){
             if( $("#notice-b li").length > 1 ){
            $("#notice-b").gSlider({
                time:5000,
                btnGo:{left:‘.bnext‘,right:‘.bprve‘},
                type:‘vertical‘//水平 horizontal
            });
          }
        });