为何、只获取了最后一个

2013-03-04

为什么、只获取了最后一个本帖最后由 hopoy 于 2013-03-01 01:00:38 编辑大侠们看下，图片滚动的效果，为什么

为什么、只获取了最后一个
本帖最后由 hopoy 于 2013-03-01 01:00:38 编辑大侠们看下，图片滚动的效果，为什么只获取了最后一个：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title></title>
<style>
ul,li { display:block; margin:0; padding:0; list-style-type:none;}
img { display:block; width:255px; height:120px;}
#focus { width:255px; height:120px; overflow:hidden; position:relative; }

</style>
</head>

<body>
<script>
window.onload = initAll;
function movel(thisli){
thisli.style.left = parseInt(thisli.style.left) - 255 + "px";
setTimeout("movel(thisli)",1000);
}
function initAll(){
var box = document.getElementById("focus");
var lis = box.getElementsByTagName("li");
for(var i=0; i<lis.length; i++){
lis[i].style.position = "absolute";
lis[i].style.top = 0 + "px";
    lis[i].style.left = 255 * i + "px";
thisli = lis[i];
movel(thisli);
}

} 
</script>

<ul id="focus">
  <li><img src="Black.jpg" /></li>
  <li><img src="Blue.jpg" /></li>
  <li><img src="Yellow.jpg" /></li>
  <li><img src="Purple.jpg" /></li>
</ul>
</body>
</html>

另外，要实现这样的效果还有其他方法吗？
[解决办法]
闭包的问题，在函数被解析之后，i的值就被确定了，自己搜索下闭包的解决方法吧，这个很常见，必须的知道的
[解决办法]
你的thisli是个固定值了
改成这样就行了


<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title></title>
<style>
ul,li { display:block; margin:0; padding:0; list-style-type:none;}
img { display:block; width:255px; height:120px;}
#focus { width:255px; height:120px; overflow:hidden; position:relative; }

</style>
</head>

<body>
<script>
window.onload = initAll;
var lis;
function movel(){
for(var i=0; i<lis.length; i++){
var thisli = lis[i];
thisli.style.left = parseInt(thisli.style.left) - 255 + "px";
if(parseInt(thisli.style.left) < 0)thisli.style.left = 255 * (lis.length - 1) + "px";
}
setTimeout("movel()",1000);
}
function initAll(){
var box = document.getElementById("focus");
lis = box.getElementsByTagName("li");
for(var i=0; i<lis.length; i++){
lis[i].style.position = "absolute";
lis[i].style.top = 0 + "px";
    lis[i].style.left = 255 * i + "px";
}
movel();
} 
</script>

<ul id="focus">
  <li><img src="Black.jpg" /></li>
  <li><img src="Blue.jpg" /></li>
  <li><img src="Yellow.jpg" /></li>
  <li><img src="Purple.jpg" /></li> 
 
</ul>
</body>
</html>

[解决办法]
注释呀......



<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title></title>
<style>
ul,li { display:block; margin:0; padding:0; list-style-type:none;}
img { display:block; width:255px; height:120px;}
#focus { width:255px; height:120px; overflow:hidden; position:relative; }

</style>
</head>

<body>
<script>
window.onload = initAll;
var lis;
function movel(){
//循环lis数组中的所有元素，即循环所有图片
for(var i=0; i<lis.length; i++){
var thisli = lis[i];
//改变每一张图片的位置
thisli.style.left = parseInt(thisli.style.left) - 255 + "px";
//为了图片连续移动，当图片位置移出左边屏幕的时候，将其移到最右边
if(parseInt(thisli.style.left) < 0)thisli.style.left = 255 * (lis.length - 1) + "px";
}
//隔一秒后重新调用movel函数
setTimeout("movel()",1000);
}
function initAll(){
var box = document.getElementById("focus");
//这里跟你写的有差别，将lis定义成全局变量
lis = box.getElementsByTagName("li");
//这个你知道了，初始化图片的位置
for(var i=0; i<lis.length; i++){
lis[i].style.position = "absolute";
lis[i].style.top = 0 + "px";
    lis[i].style.left = 255 * i + "px";
}
//第一次调用movel函数
movel();
} 
</script>

<ul id="focus">
  <li><img src="Black.jpg" /></li>
  <li><img src="Blue.jpg" /></li>
  <li><img src="Yellow.jpg" /></li>
  <li><img src="Purple.jpg" /></li>
</ul>
</body>
</html>

热点排行

JavaScript

为何、只获取了最后一个