diff --git a/js/jquery.leoTextAnimate.js b/js/jquery.leoTextAnimate.js
new file mode 100644
index 0000000..a889bef
--- /dev/null
+++ b/js/jquery.leoTextAnimate.js
@@ -0,0 +1,209 @@
+;(function($, window, document, undefined) {
+	var leoTextAnimate = function(eles, opts) {
+		this.element = $(eles);
+		this.string = $(eles).html();
+		this.defaults = {
+			speed: 2500,
+			autorun: true,
+			delay: 0,
+			fixed: '',
+			start: ''
+		};
+		this.options = $.extend({}, this.defaults, opts);
+		this.height = $(eles).height();
+	}
+	leoTextAnimate.prototype = {
+		init: function() {
+			if (this.element.find('.TextAnimate').length <= 0) {
+				var html = method.getHtml(this.options, this.string);
+				
+				console.log(html)
+				this.element.html(html);
+			}
+			this.reset();
+			if (this.options.autorun) {
+				if (this.options.delay == 0) {
+					this.run();
+				} else {
+					var $this = this;
+					setTimeout(function() {
+						$this.run();
+					},
+					this.options.delay);
+				}
+			}
+		},
+		reload: function() {
+			if(this.options.text){
+				this.string = this.options.text;
+				this.element.html(this.options.text);
+			}
+			this.init();
+		},
+		reset: function() {
+			var $this = this.element.find('.TextAnimate');
+			$this.css({
+				'overflow': 'hidden',
+				'display':'inline-block',
+				'vertical-align':'top',
+				'height': this.height
+			}).find("span").css({
+				'display': 'inline-block',
+				'vertical-align': 'top',
+				'position': 'relative',
+				'top': '0px',
+				'transform': 'translateY(0px)',
+				'-ms-transform': 'translateY(0px)',
+				'-moz-transform': 'translateY(0px)',
+				'-webkit-transform': 'translateY(0px)',
+				'-o-transform': 'translateY(0px)',
+				'-ms-transition': '0s',
+				'-moz-transition': '0s',
+				'-webkit-transition': '0s',
+				'-o-transition': '0s',
+				'transition': '0s'
+			}).find("i").css({
+				'display': 'block',
+				'font-style': 'normal',
+				'height': this.height
+			});
+		},
+		run: function() {
+			var speed = this.options.speed;
+			var height = this.height;
+			this.reset();
+			this.element.find("span").each(function() {
+				var $this = $(this);
+				var length = $this.find('i').index($this.find('.on'));
+				var to = -length * height + 'px';
+				if (to != $this.css("top")) {
+					if (!window.applicationCache) {
+						$this.animate({
+							top: to
+						},
+						speed);
+					} else {
+						$this.css({
+							'transform': 'translateY(' + to + ')',
+							'-ms-transform': 'translateY(' + to + ')',
+							'-moz-transform': 'translateY(' + to + ')',
+							'-webkit-transform': 'translateY(' + to + ')',
+							'-o-transform': 'translateY(' + to + ')',
+							'-ms-transition': speed / 1000 + 's',
+							'-moz-transition': speed / 1000 + 's',
+							'-webkit-transition': speed / 1000 + 's',
+							'-o-transition': speed / 1000 + 's',
+							'transition': speed / 1000 + 's'
+						});
+					}
+				}
+			});
+		}
+	}
+	var method = {
+		getNumber: function(options, string) {
+			if(!this.inArr(options.fixed, string)) {
+				var text = '<span>';
+				if (options.start !== '') {
+					text += '<i>' + options.start + '</i>';
+				}
+				for (var i = 0; i < 10; i++) {
+					text += '<i' + (i == string ? ' class="on"': '') + '>' + i + '</i>';
+				}
+				return text + '</span>';
+			} else {
+				return '<span><i class="on">' + string + '</i></span>';
+			}
+		},
+		getLowerCase: function(options, string, code) {
+			if (!this.inArr(options.fixed, string)) {
+				var text = '<span>';
+				if (options.start !== '') {
+					text += '<i>' + options.start + '</i>';
+				}
+				for (var i = 0; i < 26; i++) {
+					text += '<i' + (97 + i == code ? ' class="on"': '') + '>' + String.fromCharCode(97 + i) + '</i>';
+				}
+				return text + '</span>';
+			} else {
+				return '<span><i class="on">' + string + '</i></span>';
+			}
+		},
+		getUpperCase: function(options, string, code) {
+			if (!this.inArr(options.fixed, string)) {
+				var text = '<span>';
+				if (options.start !== '') {
+					text += '<i>' + options.start + '</i>';
+				}
+				for (var i = 0; i < 26; i++) {
+					text += '<i' + (65 + i == code ? ' class="on"': '') + '>' + String.fromCharCode(65 + i) + '</i>';
+				}
+				return text + '</span>';
+			} else {
+				return '<span><i class="on">' + string + '</i></span>';
+			}
+		},
+		getUnicode: function(options, string, code) {
+			if (!this.inArr(options.fixed, string)) {
+				var text = '<span>';
+				if (options.start !== '') {
+					text += '<i>' + options.start + '</i>';
+				}
+				for (var i = (code - this.getRand(2, 7)); i < (code + this.getRand(3, 10)); i++) {
+					text += '<i' + (i == code ? ' class="on"': '') + '>' + String.fromCharCode(i) + '</i>';
+				}
+				return text + '</span>';
+			} else {
+				return '<span><i class="on">' + string + '</i></span>';
+			}
+		},
+		getHtml: function(options, string) {
+			var html = '<div class="TextAnimate">'
+			for (var i = 0; i < string.length; i++) {
+				var text = string.substr(i, 1);
+				var code = text.charCodeAt();
+				if (code > 47 && code < 58) {
+					html += this.getNumber(options, text);
+				} else if (code > 64 && code < 91) {
+					html += this.getUpperCase(options, text, code);
+				} else if (code > 96 && code < 123) {
+					html += this.getLowerCase(options, text, code);
+				} else {
+					html += this.getUnicode(options, text, code);
+				}
+			}
+			return html + '</div>';
+		},
+		getRand: function(minnum, maxnum) {
+			return Math.floor(minnum + Math.random() * (maxnum - minnum));
+		},
+		inArr: function(arr,str){
+			for(var i=0;i<arr.length;i++){
+				if(arr[i].indexOf(str)!==-1){
+					return true;
+				}
+			}
+			return false;
+		}
+	}
+	$.fn.leoTextAnimate = function(options,options2) {
+		$(this).each(function(){
+			var plugin = $._data(this, "leoTextAnimate");
+			if(options2){
+				var opts = $.extend(true, {}, $.fn.leoTextAnimate.defaults, typeof options2 === "object" ? options2 : {});
+			} else {
+				var opts = $.extend(true, {}, $.fn.leoTextAnimate.defaults, typeof options === "object" ? options : {});
+			}
+			plugin = new leoTextAnimate(this, opts);
+			$._data(this, "leoTextAnimate", plugin);
+			if (plugin[options]) {
+				return plugin[options].apply(plugin, Array.prototype.slice.call(arguments, 1));
+			} else if (typeof options === 'object' || !options) {
+				return plugin.init();
+			} else {
+				$.error('Method ' + options + ' does not exist on jQuery.leoTextAnimate');
+			}
+			return this;
+		});
+	};
+})(jQuery, window, document);
\ No newline at end of file
diff --git a/test.html b/test.html
index 8100f68..f3feae7 100644
--- a/test.html
+++ b/test.html
@@ -12,11 +12,12 @@
     <link href="css/bootstrap.css" rel="stylesheet">
     <link href="css/bxslider.css" rel="stylesheet">
     <link href="css/style.css" rel="stylesheet">
-    <link href="css/swiper-bundle.min.css" rel="stylesheet">    
+    <link href="css/swiper-bundle.min.css" rel="stylesheet">
     <script src="js/jquery.min.js"></script>
     <script src="js/bxslider.min.js"></script>
     <script src="js/common.js"></script>
     <script src="js/bootstrap.js"></script>
+    <script src="js/jquery.leoTextAnimate.js"></script> 
     <style>
         * {
             padding: 0;
@@ -116,11 +117,15 @@
 
         /*add*/
         .swiper-slide img{ width: 100%;height: 100%; }
+
+
+       
     </style>
 </head>
  
 <body>
     <div class="container-pro">
+       
         <div class="section section1">
 
             <!-- p1 -->
@@ -190,21 +195,21 @@
                         </div>
 
                         <div class="col-sm-4 col-md-4 counter-wrap">
-                            <div class="counter"><span>180</span>&nbsp;亿元</div>
+                            <div class="counter"><span class="number1">180</span>&nbsp;亿元</div>
                             <p class="text">注册资本</p>
                         </div>
                         <div class="col-sm-4 col-md-4 counter-wrap">
-                            <div class="counter"><span>237</span>&nbsp;亿元</div>
+                            <div class="counter"><span class="number2">237</span>&nbsp;亿元</div>
                             <p class="text">总资产</p>
                         </div>
                         <div class="col-sm-4 col-md-4 counter-wrap">
-                            <div class="counter"><span>1400</span>&nbsp;亿元</div>
+                            <div class="counter"><span class="number3">1400</span>&nbsp;亿元</div>
                             <p class="text">管理规模</p>
                         </div>
-
                         <div class="col-xs-12 col-sm-12 col-md-12">
                             <a href="#" class="about_more">探索更多</a>
                         </div>
+                       
                     </div>
                 </div>
             </div>
@@ -412,7 +417,7 @@
         <li>5</li>
         <li>6</li>
     </ul>
-
+   
     <script type="text/javascript" src="js/swiper-bundle.min.js"></script>
     <!-- Initialize Swiper -->
     <script>
@@ -475,6 +480,9 @@
             }
             lis[index].className = 'active'
         }
+        $('.number1').leoTextAnimate({delay:0,autorun:true,fixed:[',',':','.'],start:'-'});
+        $('.number2').leoTextAnimate({delay:0,autorun:true,fixed:[',',':','.'],start:'-'});
+        $('.number3').leoTextAnimate({delay:0,autorun:true,fixed:[',',':','.'],start:'-'});
     </script>