首页 > 代码库 > 图片轮播
图片轮播
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
#main{
width: 226px;
overflow: hidden;
}
img{
width: 226px;
height: 226px;
}
#main ul{
width: 452px;
}
#main ul li{
list-style-type: none;
float: left;
}
</style>
</head>
<body>
<div id="main">
<ul id="imglist">
<li ><img src=http://www.mamicode.com/"1.jpg" alt="">
<li><img src=http://www.mamicode.com/"2.jpg" alt="">
</ul>
</div>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
// 获得ul 对象， 存储到变量里去
var ulobj = $(‘imglist‘);
// 给li 添加默认的marginLeft 的属性， 为0 ,这是为了后边在第一次获得数据的时候不为空
ulobj.getElementsByTagName("li")[0].style.marginLeft=‘0‘;
ulobj.getElementsByTagName("li")[1].style.marginLeft=‘0‘;
setInterval(function(){
// 获得 ul 下的第一个li 儿子，并且不能放在外面，因为li 都是动态创建的
var templi = ulobj.getElementsByTagName("li")[0];
// 获得 li 距离左边的距离，为了距离的叠减
var tempnm = parseInt(templi.style.marginLeft);
templi.style.marginLeft = tempnm-10+‘px‘;
// 判断如果第一个儿子不在可视区域
if(tempnm<=-226){
// 克隆节点
var changeli = templi.cloneNode(true);
// 删除第一个儿子
ulobj.removeChild(templi);
// 将克隆的节点的marginLeft 值还原为默认值
changeli.style.marginLeft=‘0‘;
// 最后将克隆的节点放在ul 的最后面
ulobj.appendChild(changeli);
}
},50);
</script>
</body>
</html>