html,body{background:#333;}  #loading{left:0;top:0;width:100%;height:100%;background:#333;color:#fff;}  #loading span{left:45%;top:40%;font:normal 50px Arial;color:#fff;}  #demo{left:50%;top:50%;margin-left:-512px;margin-top:-384px;width:1024px;height:768px;}  #demo img{border-radius:8px;border:5px solid #555;}  .back{font-size:18px;line-height:130%;padding:8px 20px;color:#fff;}  #back-home{left:0px;top:0px;background:#35916D;}  #back-article{right:0px;top:0px;background:#444;}  #back-download{right:0px;bottom:0px;background:#CE565D;}

<div id="demo" class="px hide"><img /></div> <div id="loading" class="px"><span class="pa"></span></div>

<script src="scripts/jquery.js?1.11.1"></script> <script src="scripts/jquery.drag360.js"></script> <script> $(function(){     $(document.body).attr({       'onSelectStart' :'return false;',       'oncontextmenu':'return false;',       'onbeforecopy':'return false;',       'oncopy':'return false;',       'ondragstart':'return false;',       'style':'-moz-user-select:none; -khtml-user-select: none; user-select: none;'     });  var Preload=function(images,callback){   var done=0,val=0;   var count=images.length;    var preload=function(url) {    var image = $("<img />").attr("src", url).on("load",function () {     complete();    });    };   var complete=function() {    done++;    val=done/count*100;    $('#loading span').text(Math.ceil(val) + "%");    if(done==count){     callback();    }   };   for(var i=0;i<images.length;i++){    preload(images[i]);   }  };  var images=[    'drag/shiwai ceshi0006.jpg',    'drag/shiwai ceshi0012.jpg',    'drag/shiwai ceshi0018.jpg',    'drag/shiwai ceshi0024.jpg',    'drag/shiwai ceshi0030.jpg',    'drag/shiwai ceshi0036.jpg',    'drag/shiwai ceshi0042.jpg',    'drag/shiwai ceshi0048.jpg',    'drag/shiwai ceshi0054.jpg',    'drag/shiwai ceshi0060.jpg',    'drag/shiwai ceshi0066.jpg',    'drag/shiwai ceshi0072.jpg',    'drag/shiwai ceshi0078.jpg',    'drag/shiwai ceshi0084.jpg',    'drag/shiwai ceshi0090.jpg',    'drag/shiwai ceshi0096.jpg',    'drag/shiwai ceshi0102.jpg',    'drag/shiwai ceshi0108.jpg',    'drag/shiwai ceshi0114.jpg',    'drag/shiwai ceshi0120.jpg',    'drag/shiwai ceshi0126.jpg',    'drag/shiwai ceshi0132.jpg',    'drag/shiwai ceshi0138.jpg',    'drag/shiwai ceshi0144.jpg',    'drag/shiwai ceshi0150.jpg',    'drag/shiwai ceshi0156.jpg',    'drag/shiwai ceshi0162.jpg',    'drag/shiwai ceshi0168.jpg',    'drag/shiwai ceshi0174.jpg',    'drag/shiwai ceshi0180.jpg',    'drag/shiwai ceshi0186.jpg',    'drag/shiwai ceshi0192.jpg',    'drag/shiwai ceshi0198.jpg',    'drag/shiwai ceshi0204.jpg',    'drag/shiwai ceshi0210.jpg',    'drag/shiwai ceshi0216.jpg',    'drag/shiwai ceshi0222.jpg',    'drag/shiwai ceshi0228.jpg',    'drag/shiwai ceshi0234.jpg',    'drag/shiwai ceshi0240.jpg',    'drag/shiwai ceshi0246.jpg',    'drag/shiwai ceshi0252.jpg',    'drag/shiwai ceshi0258.jpg',    'drag/shiwai ceshi0264.jpg',    'drag/shiwai ceshi0270.jpg',    'drag/shiwai ceshi0276.jpg',    'drag/shiwai ceshi0282.jpg',    'drag/shiwai ceshi0288.jpg',    'drag/shiwai ceshi0294.jpg',    'drag/shiwai ceshi0300.jpg',    'drag/shiwai ceshi0306.jpg',    'drag/shiwai ceshi0312.jpg',    'drag/shiwai ceshi0318.jpg',    'drag/shiwai ceshi0324.jpg',    'drag/shiwai ceshi0330.jpg',    'drag/shiwai ceshi0336.jpg',    'drag/shiwai ceshi0342.jpg',    'drag/shiwai ceshi0348.jpg',    'drag/shiwai ceshi0354.jpg',    'drag/shiwai ceshi0360.jpg',  ];  Preload(images,function(){   $("#loading").fadeOut();   $("#demo img").attr("src",images[0]);   $("#demo").fadeIn();   $("#demo img").drag360(images);  }); }); </script>

(function($){     $.fn.drag360=function(images){         var mdx,mmx,isDrag=false,unitStep=40,current=0;         var that=$(this);         var length=images.length;         //触摸          that.on('touchstart',function(e){             var touch = e.originalEvent;                 mdx = touch.changedTouches[0].pageX;                 isDrag=true;         }).on('touchmove',function(e){             e.preventDefault();             touch = e.originalEvent.touches[0]||e.originalEvent.changedTouches[0];             mmx=touch.pageX;             if(isDrag){                 if(Math.abs(mmx-mdx)>unitStep){                     if(mmx-mdx>0){                         current=current+1;                     }else{                         current=current-1;                     }                     mdx=mmx;                     if(current<0)current=length-1;                     if(current>length-1)current=0;                     that.attr("src",images[current]);                 }             }         }).on('touchend',function(e){             isDrag=false;         });         //拖动         that.on('mousedown',function(e){             mdx=e.pageX;             isDrag=true;         }).on('mousemove',function(e){             mmx=e.pageX;             if(isDrag){                 if(Math.abs(mmx-mdx)>unitStep){                     current=current+(mmx-mdx>0?1:-1);                     mdx=mmx;                     if(current<0)current=length-1;                     if(current>length-1)current=0;                     that.attr("src",images[current]);                 }             }             return false;         })         $(document).on('mouseup',function(e){             isDrag=false;         });         $(document).on('mouseleave',function(e){             isDrag=false;         });         return this;     }; })(jQuery);