手機端圖片放大輪播 懶載入
阿新 • • 發佈:2018-12-06
<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>
$(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); })