<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{padding:;margin:;list-style:none;}
#box{width:600px; height:400px; border:1px solid #; margin:50px auto; position:relative;}
#iph{width:200px; height:200px; border:1px solid #ccc; position:absolute; top:%; left:370px; margin-top:-100px; overflow:hidden;}
#wrap{position:absolute;top:;left:; width:800px; height:200px;}
#wrap li{float:left; width:200px; height:200px;}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var oW=document.getElementById('wrap');
var oBox=document.getElementById('box');
var aLi=oW.children;
var count=;
oW.onmousedown=function(ev){
clearInterval(oW.timer);
var oEvent=ev||event;
var start=oEvent.clientX;
var disX=oEvent.clientX-oW.offsetLeft;
document.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX-disX;
oW.style.left=l+'px';
};
document.onmouseup=function(ev){
var oEvent=ev || event;
var end=oEvent.clientX;
if(end-start>){
count--;
if(count==-){
count=;
}
move(oW,{left:-aLi[].offsetWidth*count});
}else if(end-start<-){
count++;
if(count==aLi.length){
count=aLi.length-;
}
move(oW,{left:-aLi[].offsetWidth*count});
}else{
move(oW,{left:-aLi[].offsetWidth*count});
}
document.onmousemove=null;
document.onmouseup=null;
};
return false;
};
};
</script>
</head> <body>
<div id="box">
<div id="iph">
<ul id="wrap">
<li style="background:red;"></li>
<li style="background:yellow;"></li>
<li style="background:blue;"></li>
<li style="background:green;"></li>
</ul>
</div>
</div>
</body>
</html>