为何、只获取了最后一个-JavaSript-爱易网页

为何、只获取了最后一个

日期：2014-05-16　浏览次数：20389 次

为什么、只获取了最后一个

本帖最后由 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>

&nb

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

为何、只获取了最后一个

相关资料更多>

推荐阅读更多>