<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>广告走马灯</title>
<style type="text/css">
*{padding: 0;margin: 0;}
img{width: 160px;height: 220px;}
.li{list-style: none;float: left;}
.as{width: 160px;height: 220px;overflow: hidden;position: relative;}
.slider{width: 800px;position: absolute;}
</style>
<script type="text/javascript">
var slider;
window.onload=function(){
slider=document.getElementById("slider")
var timer=setInterval(move,10)
}
function move()
{
//获得距离左边的值
var newleft=parseInt(slider.style.left);
if(newleft>-160)
{
slider.style.left=newleft-1+"px"
}
else
{
slider.style.left=0
//获取第一个li的元素内容
var firstli=document.getElementsByTagName("li")[0];
//删除第一个li
slider.removeChild(firstli);//removeChild从子节点列表中删除指定节点
//把第一个子元素li添加到ul的末尾
slider.appendChild(firstli);//向节点的子节点末尾添加新的节点
}
console.log(newleft)
}
</script>
</head>
<body>
<div class="as">
<ul class="slider" id="slider" style="left: 0;top: 0;">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
</ul>
</div>
</body>
</html>
596
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
