ASP.NET实现图片横向滚动功

   最近接手了王总的一个.NET目，做着还挺有感觉，之前学过的知识又重拾起来了，收获很大！今天做的是前端的一个功能，要实现图片的滚动效果。之前没有做过类似的，所以查阅了很多资料，最终拼凑出来了，给大家分享一下。。

   因为是一个动态效果，所以首先要做一个JS  

(function( $ ) {
  $.fn.promptumenu = function(options) {
  
    // Here goes
	
	var settings = $.extend({
		'columns': 3,
		'rows': 4,
		'direction': 'horizontal',
		'width': 'auto',
		'height': 'auto',
		'duration': 500,
		'pages': true,
		'showPage': true,
		'inertia': 200
	}, options);
	
	return this.each(function(){
		var $this = $(this);
		var properties;
		var cursor = {
			x:0,
			y:1,
			page:1
		};
		var cells = {
			'width': 0,
			'height': 0,
			'pages': 1,
			'current_page': 1
		};
		
		var methods = {
			//navigating to a specific page
			go_to: function(index, easing, webkit){
				if (easing === undefined){
					easing = 'swing';
				}
				if(webkit === undefined){
					webkit = false;
				}
				var anim, anim_css;
				if(settings.direction == 'vertical'){
					
					anim = {'top': (index - 1) * properties.height * (-1)};
					anim_css = {'-webkit-transform': 'translate3d(0px, ' + ((index - 1) * properties.height * (-1)) + 'px, 0px)'};
					
				} else {
					
					anim = {'left': (index - 1) * properties.width * (-1)};
					anim_css = {'-webkit-transform': 'translate3d(' + ((index - 1) * properties.width * (-1)) + 'px, 0px, 0px)'};
					
				}
				
				if(webkit){
					$this.css({
					'-webkit-transition-property': '-webkit-transform',
					'-webkit-transition-duration': settings.duration + 'ms',
					'-webkit-transition-timing-function': 'ease-out'
					});
					$this.css(anim_css);
					$this.data('ppos', (index - 1) * properties.width * (-1));
				}
				if(navigator.userAgent.indexOf("Firefox")>0){ 
					$this.animate(anim, settings.duration, easing);
				}
				if(!webkit && navigator.userAgent.indexOf("Firefox")<=0){ 
				   $this.animate(anim, settings.duration, easing);
				}
				$this.parent('.promptumenu_window').find('.promptumenu_nav a.active').removeClass('active');
				$this.parent('.promptumenu_window').find('.promptumenu_nav a:nth-child(' + (index) + ')').addClass('active');
				cells.current_page = index;
			},
			next_page: function(){
				methods.go_to(cells.current_page + 1);
			},
			prev_page: function(){
				methods.go_to(cells.current_page - 1);
			}
		};
		
		if($this.data('promptumenu')){
			//This element already has promptumenu set up
			console.error('You are calling promptumenu for an element more than twice. Please have a look.');
		} else {
			//this element hasn't been initialized yet, so we set it up
			$this.data('promptumenu', true);
			$this.data('ppos', 0);
			
			//take in mind the original css properties of the element, so we can preserve it's position.
			properties = {
				'width': (settings.width == 'auto') ? $this.width() : settings.width,
				'height': (settings.height == 'auto') ? $this.height() : settings.height,
				'margin': $this.css('margin'),
				'position': ($this.css('position') == 'absolute') ? 'absolute