1<!doctype html>234<meta charset="Utf-8">5<title> Untitled Document </title>6<style>7*{padding:0; margin:0; list-Style:none;}8#box {width:600px; height:400px; border:1px solid # the; margin:50px auto; position:relative;}9#iph {width:200px; height:200px; border:1px solid #ccc; position:absolute; Top: -%; left:370px; margin-top:-100px; overflow:hidden;}Ten#wrap {position:absolute;top:0; Left:0; width:800px; height:200px;} One#wrap li{float: Left; width:200px; height:200px;} A</style> -<script src="Move.js"></script> -<script> theWindow.onload=function () { - varOw=document.getelementbyid ('Wrap'); - varObox=document.getelementbyid ('Box'); - varAli=Ow.children; + varCount=0; -ow.onmousedown=function (EV) { + clearinterval (ow.timer); A varoevent=ev| |Event; at varstart=Oevent.clientx; - vardisx=oevent.clientx-Ow.offsetleft; -Document.onmousemove=function (EV) { - varoevent=ev| |Event; - varl=oevent.clientx-Disx; -ow.style.left=l+'px'; in }; -document.onmouseup=function (EV) { to varOevent=ev | |Event; + varEnd=Oevent.clientx; - if(end-start> -){ thecount--; * if(count==-1){ $Count=0; Panax Notoginseng } -Move (ow,{left:-ali[0].offsetwidth*count}); the}Else if(end-start<- -){ +count++; A if(count==ali.length) { thecount=ali.length-1; + } -Move (ow,{left:-ali[0].offsetwidth*count}); $}Else{ $Move (ow,{left:-ali[0].offsetwidth*count}); - } -Document.onmousemove=NULL; thedocument.onmouseup=NULL; - };Wuyi return false; the }; - }; Wu</script> - About $<body> -<div id="Box"> -<div id="iph"> -<ul id="Wrap"> A<li style="background:red;"></li> +<li style="Background:yellow;"></li> the<li style="Background:blue;"></li> -<li style="Background:green;"></li> $</ul> the</div> the</div> the</body> theMobile Phone touch screen