*{margin: 0;padding: 0;}
#div1{
width:810px;
height:320px;
position:relative;
overflow: hidden;
margin:10px 10px;
}
#div2{
width:810px;
height:320px;
position:absolute;
top:0px;
left:0px;
}
#div2 ul{
width:3240px;
list-style:none;
}
li{
float:left;
height:320px;
}
</style>
<body>
<div id="div1">
<div id="div2">
<ul>
<li><img src="img/001.jpg"></li>
<li><img src="img/002.jpg"></li>
<li><img src="img/003.jpg"></li>
<li><img src="img/004.jpg"></li>
</ul>
</div>
</div>
</body>
<script src="js/startMoveBool.js"></script>
<script type="text/javascript">
var div2 = document.getElementById("div2");
var imgWidth=810;
var index=1;
div2.onclick = function(){
startMove(div2,{left:-imgWidth*index},function(){
if(index==3){
div2.style.left=0;
index=1;}
else
{index++;}
});
}
</script>