<! DOCTYPE html>
<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>
<body>
<div id= "Wrap" >
<ul id= "ul" >
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<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>
Native JS Write Carousel