1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 *{padding:0;margin:0;list-style:none;} 8 #box{width:600px; height:400px; border:1px solid #000; margin:50px auto; position:relative;} 9 #iph{width:200px; height:200px; border:1px solid #ccc; position:absolute; top:50%; left:370px; margin-top:-100px; overflow:hidden;} 10 #wrap{position:absolute;top:0;left:0; width:800px; height:200px;} 11 #wrap li{float:left; width:200px; height:200px;} 12 </style> 13 <script src="move.js"></script> 14 <script> 15 window.onload=function(){ 16 var oW=document.getElementById(‘wrap‘); 17 var oBox=document.getElementById(‘box‘); 18 var aLi=oW.children; 19 var count=0; 20 oW.onmousedown=function(ev){ 21 clearInterval(oW.timer); 22 var oEvent=ev||event; 23 var start=oEvent.clientX; 24 var disX=oEvent.clientX-oW.offsetLeft; 25 document.onmousemove=function(ev){ 26 var oEvent=ev||event; 27 var l=oEvent.clientX-disX; 28 oW.style.left=l+‘px‘; 29 }; 30 document.onmouseup=function(ev){ 31 var oEvent=ev || event; 32 var end=oEvent.clientX; 33 if(end-start>30){ 34 count--; 35 if(count==-1){ 36 count=0; 37 } 38 move(oW,{left:-aLi[0].offsetWidth*count}); 39 }else if(end-start<-30){ 40 count++; 41 if(count==aLi.length){ 42 count=aLi.length-1; 43 } 44 move(oW,{left:-aLi[0].offsetWidth*count}); 45 }else{ 46 move(oW,{left:-aLi[0].offsetWidth*count}); 47 } 48 document.onmousemove=null; 49 document.onmouseup=null; 50 }; 51 return false; 52 }; 53 }; 54 </script> 55 </head> 56 57 <body> 58 <div id="box"> 59 <div id="iph"> 60 <ul id="wrap"> 61 <li style="background:red;"></li> 62 <li style="background:yellow;"></li> 63 <li style="background:blue;"></li> 64 <li style="background:green;"></li> 65 </ul> 66 </div> 67 </div> 68 </body> 69 </html>
原文：http://www.cnblogs.com/lixuekui/p/5816366.html