【案例分享】jquery仿手机图片预览展示

//点击小图预览大图,大图左右滑动
布局：div+ul+li+img+li+ul+div //小图
div+ul+li+img+li+ul+div // 大图

样式：图片绝对定位，覆盖一起。
大图div隐藏

不足：图片大小不一，小图覆盖不了大图，请img固定高度

温馨提示：请在手机预览效果

         var startX, startY, endX, endY;
         $(".listimgpositon img").on("touchstart", function(){
                 event.preventDefault();//取消事件的默认行为
                 var touch = event.touches[0];
                   startY = touch.pageY;
                   startX = touch.pageX;

             });

         $(".listimgpositon img").on("touchmove",function(){
                  event.preventDefault();
                   var touch = event.touches[0];
                   //endY = (startY - touch.pageY);
                  endX = touch.pageX;
                  endY = touch.pageY;

             });

         $(".listimgpositon img").on("touchend",function(){
              event.preventDefault();
              //alert(startX - endX)
                 if ((startX - endX) > 50){

                          if($(this).attr("id")=="img08"){
                                   $(this).css("z-index","9")
                           }else{
                                  $(".listimgpositon img").css("z-index","2")
                                  $(this).parent().next().children().css("z-index","9")
                               }

                     }

                 if ((startX - endX) < -50){

                              if($(this).attr("id")=="img01"){
                                           $(this).css("z-index","9")
                                    }else{

                                           $(".listimgpositon img").css("z-index","2")
                                           $(this).parent().prev().children().css("z-index","9")
                                        }

                     }

             });