标签:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding: 0;
}
#wrap{
width: 411px;
height: 449px;
overflow: hidden;
border: 1px solid red;
margin: 0 auto;
}
#ul{
width: 1233px;
list-style: none;
}
li{
float: left;
}
img{
position: relative;
top: 0;
left: 0;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="ul">
<li><img src="gallery-img1.png" /></li>
<li><img src="gallery-img2.png" /></li>
<li><img src="gallery-img3.png" /></li>
</ul>
</div>
</body>
</html>
<script>
var ul = document.getElementById("ul");
var li = document.getElementsByTagName("li");
// console.log(li.length);
for(var i = 0; i<li.length;i++){
li[i].style.marginLeft="0";
}
var runID = setInterval(run,50);
function run(){
var liOne = li[0];
var left = parseInt(liOne.style.marginLeft);
liOne.style.marginLeft = left - 15 +"px";
// console.log(img.style.left);
if(left<=-411){
liOne.style.marginLeft="0";
ul.removeChild(liOne);
ul.appendChild(liOne);
}
}
</script>
标签:
原文地址:http://www.cnblogs.com/lidongrain/p/4986695.html