码迷,mamicode.com
首页 > Web开发 > 详细

原生JS写轮播

时间:2015-11-22 21:41:30      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

原生JS写轮播

标签:

原文地址:http://www.cnblogs.com/lidongrain/p/4986695.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!