我在做一个无缝滚动的页面 可是不知道哪里出错了动不了 能帮我看看么？
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
*{
margin:0px;
padding:0px;
}
#div1{
position:relative;
margin:150px auto 0px auto;
height:87px;
width:560px;
border-top:10px solid black;
border-bottom: 10px solid blue;
}
#div1 ul {
position:absolute;
width:1120px;
height:87px;
list-style:none;
}
#div1 ul li {
width:140px;
height:87px;
float:left;
}
</style>
<script> window.onload=function()
{
var oDiv=document.getElementById("div1");
var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
var oUl=document.getElementsByTagName("ul")[0];
var oLis=document.getElementsByTagName("li");
var speed=-2;
var fjtime=null;
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
function fjmove()
{
if(speed<0 && oUl.offsetLeft<=-oUl.offsetWidth/2)
oUl.style.left="0";
else if(speed>0 && oUl.offsetLeft>=0)
oUl.style.left=-oUl.offsetWidth/2+"px";
else
oUl.style.left=oUl.offsetLeft+speed+"px";
}
oBtn1.onclick=function()
{ speed=-2;
}
oBtn2.onclick=function()
{speed=2;
}
clearInterval(fjtimer);
fjtimer=setInterval(function(){fimove()},30);
oDiv.onmouseover=function()
{
clearInterval(fjtimer);
}
oDiv.onmouseout=function()
{clearInterval(fjtimer);
fjtimer=setInterval(function(){fjmove()},30);
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input id="btn1" name="btn1" type="button" value="左移"/>
<input id="btn1" name="btn1" type="button" value="右移"/>
<div id="div1">
<ul>
<li><img src="images/1.jpg" width="140" height="87" /></li>
<li><img src="images/2.jpg" width="140" height="87" /></li>
<li><img src="images/3.jpg" width="140" height="87" /></li>
<li><img src="images/4.jpg" width="140" height="87" /></li>
</ul>
</div>
</body>
</html> 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
*{
margin:0px;
padding:0px;
}
#div1{
position:relative;
margin:150px auto 0px auto;
height:87px;
width:560px;
border-top:10px solid black;
border-bottom: 10px solid blue;
}
#div1 ul {
position:absolute;
width:1120px;
height:87px;
list-style:none;
}
#div1 ul li {
width:140px;
height:87px;
float:left;
}
</style>
<script> window.onload=function()
{
var oDiv=document.getElementById("div1");
var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
var oUl=document.getElementsByTagName("ul")[0];
var oLis=document.getElementsByTagName("li");
var speed=-2;
var fjtime=null;
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
function fjmove()
{
if(speed<0 && oUl.offsetLeft<=-oUl.offsetWidth/2)
oUl.style.left="0";
else if(speed>0 && oUl.offsetLeft>=0)
oUl.style.left=-oUl.offsetWidth/2+"px";
else
oUl.style.left=oUl.offsetLeft+speed+"px";
}
oBtn1.onclick=function()
{ speed=-2;
}
oBtn2.onclick=function()
{speed=2;
}
clearInterval(fjtimer);
fjtimer=setInterval(function(){fimove()},30);
oDiv.onmouseover=function()
{
clearInterval(fjtimer);
}
oDiv.onmouseout=function()
{clearInterval(fjtimer);
fjtimer=setInterval(function(){fjmove()},30);
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input id="btn1" name="btn1" type="button" value="左移"/>
<input id="btn1" name="btn1" type="button" value="右移"/>
<div id="div1">
<ul>
<li><img src="images/1.jpg" width="140" height="87" /></li>
<li><img src="images/2.jpg" width="140" height="87" /></li>
<li><img src="images/3.jpg" width="140" height="87" /></li>
<li><img src="images/4.jpg" width="140" height="87" /></li>
</ul>
</div>
</body>
</html> 展开
1个回答
展开全部
建议立即学会用 Chrome Dev Tools。
你这个问题，用 上面工具一看，就告诉你 oBtn2 出了问题，代码里，根本没有这个 id：btn2
---
错误还不止一处，大多是粗心的照本宣科，不走心导致。
var fjtimer; // 防止 line:25 缺少声明
window.onload = function() {
var oDiv = document.getElementById("div1");
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var oUl = document.getElementsByTagName("ul")[0];
var oLis = document.getElementsByTagName("li");
var speed = -2;
var fjtime = null;
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
function fjmove() {
if (speed < 0 && oUl.offsetLeft <= -oUl.offsetWidth / 2)
oUl.style.left = "0";
else if (speed > 0 && oUl.offsetLeft >= 0)
oUl.style.left = -oUl.offsetWidth / 2 + "px";
else
oUl.style.left = oUl.offsetLeft + speed + "px";
}
oBtn1.onclick = function() {
speed = -2;
}
oBtn2.onclick = function() {
speed = 2;
}
clearInterval(fjtimer);
fjtimer = setInterval(function() {
fjmove();// 此处拼写错误，已修正
}, 30);
oDiv.onmouseover = function() {
clearInterval(fjtimer);
}
oDiv.onmouseout = function() {
clearInterval(fjtimer);
fjtimer = setInterval(function() {
fjmove()
}, 30);
}
}
来自：求助得到的回答
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
