js中无缝滚动问题 我明明跟视频一模一样 却运行不了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
#div1 {
width:712px;
height:108px;
margin:100px auto;
position: relative;
background:red;
overflow: hidden;
}
#div1 ul{
position: absolute;
left:0;
top:0;
}
#div1 ul li {
width: 178px;
height:108px;
float: left;
list-style: none;
}
#div1 ul li image{
width: 178px;
height:108px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementById("div1");
var oul=oul.document.getElementsByName("ul")[0];
var oli=oul.document.getElementsByName("li");
var timer; var speed=2;
oul.innerHTML+=oul.innerHTML;
oul.style.width=oli[0].offsetWidth*oli.length+'px';
function move(){
if(oul.offsetLeft<-oul.offsetWidth/2){
/* 此时的offsetLeft是负的 offsetWidth*/
oul.style.left='0';
}
if(oul.offsetLeft>0)
{
oul.style.left=-oul.offsetWidth/2+'px';
}
oul.style.left=oul.offsetLeft-speed+'px';
}
timer=setInterval(move, 30);
odiv.onmouseover=function(){
clearInterval(timer);
}
odiv.onmouseout=function(){
timer=setInterval(move, 30);
}
};
document.getElementsByName('a')[0].onclick=function(){
speed=-2;
}
document.getElementsByName('a')[0].onclick=function(){
speed=2;
}
</script>
</head>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
<ul>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
代码错误还不少。。
1、里面的getElementsByTagName都写错了。
2、window.onload下面的两个oul和oli定义错了。
3、下面的两个a标签，应该是一个是[0]，一个是[1]
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
#div1 {
width:712px;
height:108px;
margin:100px auto;
position: relative;
background:red;
overflow: hidden;
}
#div1 ul{
position: absolute;
left:0;
top:0;
}
#div1 ul li {
width: 178px;
height:108px;
float: left;
list-style: none;
}
#div1 ul li image{
width: 178px;
height:108px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementById("div1");
var oul=odiv.getElementsByTagName("ul")[0];
var oli=odiv.getElementsByTagName("li");
var timer;
var speed=2;
oul.innerHTML+=oul.innerHTML;
oul.style.width=oli[0].offsetWidth*oli.length+'px';
function move(){
if(oul.offsetLeft<-oul.offsetWidth/2){
/* 此时的offsetLeft是负的 offsetWidth*/
oul.style.left='0';
}
if(oul.offsetLeft>0)
{
oul.style.left=-oul.offsetWidth/2+'px';
}
oul.style.left=oul.offsetLeft-speed+'px';
}
timer=setInterval(move, 30);
odiv.onmouseover=function(){
clearInterval(timer);
}
odiv.onmouseout=function(){
timer=setInterval(move, 30);
}
document.getElementsByTagName('a')[0].onclick=function(){
speed=-2;
}
document.getElementsByTagName('a')[1].onclick=function(){
speed=2;
}
};
</script>
</head>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
<ul>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
</ul>
</div>
</body>
</html>