標籤：
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>
手機觸控螢幕
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
