一个图片放大显示并可以左右滑动的功能（1）

开发项目时候老大提了个需求，要让

上面的图面点击可以放大至全屏，并可以左右滑动浏览。

之前有用过fancybox这个jq插件，但是用那么大个插件实现这么小的功能实在是不适合。

再加上这是一次绝好的练手写功能的机会，于是下定决心搞出这么个东西。

思路是

//遍历容器内所有img标签并储存，数据格式为数组

//创建外围容器并存放元素

//添加点击事件

//添加左右滑动事件

//添加限制

//事件结束删除容器

经过一下午研究琢磨，弄出这么个代码。

$.fn.extend({
		imgScroll:function(config){
			var W = $(window),
				isTouch	= document.createTouch !== undefined,
				_imgArray = _this.find('img'),
				LENGTH = _this.find('img').length,
				WIDTH = isTouch && window.innerWidth  ? window.innerWidth  : W.width(),
				HEIGHT = isTouch && window.innerHeight ? window.innerHeight : W.height();
			var _this = $(this);
			var data = [];
			
			var isRun;
			var clientStartX,clientStartY,clientEndX,clientEndY;
			var range;
			var absRange;
			var _container;
			var $container;
			//遍历容器内所有img标签并储存，数据格式为数组
			if(LENGTH>0){
				for(i=0;i<LENGTH;i++){
					data.push(_imgArray.eq(i).attr('src'));
				}
			}
			//添加点击事件
			_this.find('img').click(function(e){
				var content = '';
				var container = '';
				var index = $(e.currentTarget).index();
				container += '<div class="imgScroll-overlay imgScroll-overlay-fixed" style="width: auto; height: auto; display: block;">';
				container += '<div class="imgScroll-wrap imgScroll-desktop" style="width:'+WIDTH+'px;height:'+HEIGHT+'px;>';
				container += '<div class="imgScroll-outer"><div class="imgScroll-inner" style="">';
				container += '<ul class="imgScroll-ul" style="width:'+LENGTH+'00%;left:'+(-WIDTH*index)+'px">';
				for(i=0;i<LENGTH;i++){
					container += '<li class="imgScroll-li" data-id="'+i+'" style="width:'+WIDTH+'px;"><img src="'+data[i]+'" alt="" style="width:'+WIDTH+'px;"></li>';
				}
				container += '</ul>';
				container += '</div></div>';
				container += '</div>';
				container += '<div class="imgScroll-countNum"><p><span id="imgScroll-picNum">'+(parseInt(index)+1)+'</span>/<span id="imgScroll-picNums">'+(parseInt(LENGTH))+'</span></p></div>';
				container += '<a title="Close" class="imgScroll-close" href="javascript:;"></a>';
				container += '</div>';
				
				$('body').append(container);
				$container = $('.imgScroll-overlay');
				_container = $('.imgScroll-ul');
			})
			
			$(document).on('touchstart','.imgScroll-overlay', function(e) {
				//event.preventDefault();
				console.log(e.originalEvent.touches[0])
				clientStartX = e.originalEvent.touches[0].clientX;
				clientStartY = e.originalEvent.touches[0].clientY;
			})
			$(document).on('touchmove','.imgScroll-overlay', function(e) {
				event.preventDefault();
				clientEndX = e.originalEvent.touches[0].clientX;
				clientEndY = e.originalEvent.touches[0].clientY;
				range = clientStartX-clientEndX;
				range>0?absRange = range:absRange = -range;
			})
			$(document).on('touchend','.imgScroll-overlay',function(e){
				event.preventDefault();
				var currentLeft = parseInt(_container.css('left'));
				var afterLeft;
				var num = parseInt($('#imgScroll-picNum').html());
				range>0?afterLeft=currentLeft-WIDTH:afterLeft=currentLeft+WIDTH;
				if(range>0&&absRange>50&¤tLeft>-(LENGTH-1)*WIDTH){
					_container.animate({left:afterLeft+'px'},500);
					$('#imgScroll-picNum').html(num+1);
				}else if(range<0&&absRange>50&¤tLeft<0){
					_container.animate({left:afterLeft+'px'},500);
					$('#imgScroll-picNum').html(num-1);
				} 
			})
			$(document).on('click','.imgScroll-close',function(e){
				$container.remove();
				$(this).remove();
              //  $(document).unbind('touchmove');
			})
			//创建外围容器并存放元素
			//添加左右滑动事件
			//添加限制
			//事件结束删除容器
		}
	}) 
	$('#imgScroll').imgScroll();

实现功能如下

总之功能是实现了，上线的时候也不用慌了，但是回头一看写的东西。。。。简直是想到啥写啥，就算我这个新手中的新手都看不下去了。

只能推倒重来了。