js图片滚动问题。无缝滚动图片做到一半，无法写下去了。4张图片，滚动时却只显示了3张。求指导下。。
<head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>无标题文档<...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#da ul{
list-style-type: none;
padding: 0px;
margin: 0px;
left:0px;
height: 130px;
position: absolute;
}
#de {
background-color: #999999;
height: 140px;
width: 500px;
margin-right: auto;
margin-left: auto;
}
li {
float: left;
margin-right: 5px;
margin-left: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
#de #y1 {
float: right;
margin-top: 55px;
}
#de #z1 {
float: left;
margin-top: 55px;
}
#da {
float: left;
height: 130px;
position: relative;
overflow: hidden;
width: 430px;
}
-->
</style>
<script type="text/javascript">
window.onload=function ()
{
var ds=document.getElementById('de');
var oul=ds.getElementsByTagName('ul')[0];
var oli=oul.getElementsByTagName('li');
oul.style.width=oli[0].offsetWidth*oli.length+'px';
setInterval(function (){
oul.style.left=oul.offsetLeft-1+'px';
},30);
};
</script>
</head>
<body>
<div id=de>
<input id="z1"type="submit" name="Submit1" value="左" />
<div id=da>
<ul>
<li><img src="1 (1).jpg" width="130" height="120" /></li>
<li><img src="1 (2).jpg" width="130" height="120" /></li>
<li><img src="1 (3).jpg" width="130" height="120" /></li>
<li><img src="1 (4).jpg" width="130" height="120" /></li>
</ul>
</div>
<input id="y1" type="submit" name="Submit2" value="右" />
</div>
</body>
</html> 展开
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#da ul{
list-style-type: none;
padding: 0px;
margin: 0px;
left:0px;
height: 130px;
position: absolute;
}
#de {
background-color: #999999;
height: 140px;
width: 500px;
margin-right: auto;
margin-left: auto;
}
li {
float: left;
margin-right: 5px;
margin-left: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
#de #y1 {
float: right;
margin-top: 55px;
}
#de #z1 {
float: left;
margin-top: 55px;
}
#da {
float: left;
height: 130px;
position: relative;
overflow: hidden;
width: 430px;
}
-->
</style>
<script type="text/javascript">
window.onload=function ()
{
var ds=document.getElementById('de');
var oul=ds.getElementsByTagName('ul')[0];
var oli=oul.getElementsByTagName('li');
oul.style.width=oli[0].offsetWidth*oli.length+'px';
setInterval(function (){
oul.style.left=oul.offsetLeft-1+'px';
},30);
};
</script>
</head>
<body>
<div id=de>
<input id="z1"type="submit" name="Submit1" value="左" />
<div id=da>
<ul>
<li><img src="1 (1).jpg" width="130" height="120" /></li>
<li><img src="1 (2).jpg" width="130" height="120" /></li>
<li><img src="1 (3).jpg" width="130" height="120" /></li>
<li><img src="1 (4).jpg" width="130" height="120" /></li>
</ul>
</div>
<input id="y1" type="submit" name="Submit2" value="右" />
</div>
</body>
</html> 展开
展开全部
做无缝滚动的常规思路是：重复第一幅图片到最后，等滚动出位于最后的“第一幅图片”时，将画布位置切换回起始位置，此后重复执行滚动即可。
给你个示例：
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
