手机端图片放大轮播 懒加载

<div class="shaimeili-box-center-img">
       <ul class="shaimeili-box-center-ul">
     		<li>
     					<a href="javascript:;">
     						<img src="images/uploadBg.png" data-src="images/3.png" original-src="images/3.png">
              </a>
     					</a>
     				</li>
     				<li>
     					<a href="javascript:;">
     						<img src="images/uploadBg.png" data-src="images/3.png" original-src="images/3.png">
              </a>
     					</a>
     				</li>
     				<li>
     					<a href="javascript:;">
     						<img src="images/uploadBg.png" data-src="images/3.png" original-src="images/3.png">
              </a>
     					</a>
     				</li>
     				<li>
     					<a href="javascript:;">
     						<img src="images/uploadBg.png" data-src="images/3.png" original-src="images/3.png">
              </a>
     					</a>
     				</li>
     				<li>
     					<a href="javascript:;">
     						<img src="images/uploadBg.png" data-src="images/3.png" original-src="/images/3.png">
              </a>
     					</a>
     				</li>
     				<li>
     					<a href="javascript:;">
     					<img src="images/uploadBg.png" data-src="static/images/3.png" original-src="/images/3.png">
     					</a>
     				</li>
     				<li>
     					<a href="javascript:;">
     						<img src="static/images/uploadBg.png" data-src="/images/3.png" original-src="static/images/3.png">
     					</a>
     				</li>
 		</ul>

js代码部分

		$(function(){ //图片放大轮播
			  var container = document.getElementById('amplification');
			      var list = document.getElementById('List');
			      var index = 0;
			      var startX = 0;
			      var endX = 0;
			    var width=parseInt($('#amplification').css('width'));
			$(document).on("click",".shaimeili-box-center-ul li", function() {
			    var length=parseInt($(this).parent().find('li').length);
			    var width=parseInt($('#amplification').css('width'));
			    var height=parseInt($('#amplification').css('height'));
			    $('.ampul').html($(this).parent().html());
			    $('.ampul li').find('img').each(function(){
			      var src=$(this).attr('original-src');
			      $(this).attr('src',src);
			    })
			    $('.ampul').css('width',length*width+'px');
			    $('.ampul li').css('width',width);
			    $('.ampul li').css('height',height);
			
			    var num=$(this).index();
			    $('.ampul').css('left',-(num)*width);
			    $('.community-mask').show();
			    $('#amplification').show();
			    $('#amplification').attr('num',length);
			    index=num;
			  }); 
			      
			      container.addEventListener('touchend',function(event){
			      var leng=parseInt($('#amplification').attr('num')-1); 
			        if(event.changedTouches.length==1&&this.getAttribute('disabled')!='disabled'){
			          var touch = event.changedTouches[0];
			          endX = touch.pageX;
			          var offset = endX-startX;
			          if(Math.abs(offset)>=50){
			            if(offset<0){// 右滑
			              nextMethod();
			            }else{
			              prevMethod();
			            }
			          }
			        }
			      });
			
			      container.addEventListener('touchmove',function(){
			        event.preventDefault();
			      })
			
			      container.addEventListener('touchstart',function(event){
			
			        if(event.targetTouches.length==1&&this.getAttribute('disabled')!='disabled'){ 
			          var touch = event.targetTouches[0];
			          startX = touch.pageX;
			        }
			      })
			      function prevMethod(){
			        var leng=parseInt($('#amplification').attr('num')-1);
			        if(index<=0){
			          // index = leng;
			         //animate('right',1,width*leng,0);
			         return false;
			        }else{
			          index--;
			          animate('left',1,width,0);
			        }
			     
			      }
			
			      function nextMethod(){
			        var leng=parseInt($('#amplification').attr('num')-1);
			        if(index==leng){
			         // index = 0;
			          //animate('left',1,width*leng,0);
			          return false;
			        }else{
			          index++;
			          animate('right',1,width,0);
			        }
			        
			      }
			
			    function animate(direction,speed,length){
			        var end = length/speed;
			        var count = 0;
			        for(var i=0;i<end;i++){
			            setTimeout(function(){
			              count++;
			              var left = list.offsetLeft;
			              if (direction=='right') {
			                left -= speed;
			              }else{
			                left += speed;
			              }
			              list.style.left = left+'px';
			            },speed*i);
			          }
			      }
			   });
			$('.takephoto').click(function(){
				  $('.community-mask').show();
				  $('.photo-pai-box').show();
			})
			$('.photo-pai-btn').on("click","span", function() {
				    $('.community-mask').hide();
				    $('.photo-pai-box').hide();
			});
			
			 $(function(){
			/*懒加载*/
				   // 获取window的引用:
				    var $window = $(window);
				    // 获取包含data-src属性的img，并以jQuery对象存入数组:
				    var lazyImgs = _.map($('img[data-src]').get(), function (i) {
				        return $(i);
			    });
			    // 定义事件函数:
			    var onScroll = function() {
			        // 获取页面滚动的高度:
			        var wtop = $window.scrollTop();
			        // 判断是否还有未加载的img:
			        if (lazyImgs.length > 0) {
			            // 获取可视区域高度:
			            var wheight = $window.height();
			            // 存放待删除的索引:
			            var loadedIndex = [];
			            // 循环处理数组的每个img元素:
			            _.each(lazyImgs, function ($i, index) {
			                // 判断是否在可视范围内:
			                if ($i.offset().top - wtop < wheight) {
			                    // 设置src属性:
			                    $i.attr('src', $i.attr('data-src'));
			                    // 添加到待删除数组:
			                    loadedIndex.unshift(index);
			                }
			            });
			            // 删除已处理的对象:
			            _.each(loadedIndex, function (index) {
			                lazyImgs.splice(index, 1);
			            });
			        }
			    };
			    // 绑定事件:
			    $window.scroll(onScroll);
			  })