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>
