                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /信息滚动效果制作

求问大神！图片向左滚动两轮就停止是什么原因?

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js图片滚动效果制作</title>
<style>
#con{
	width:500px;
	height:110px;
	border:1px solid #666;
	overflow:hidden;
	}
li{
	list-style:none;
	float:left;	
		}		
ul{width:1000px;}
</style>

</head>

<body>
<div id="con">
   <ul id="con1">
      <li><img src="img/1.jpg" width="100" height="100" /></li>
      <li><img src="img/2.jpg" width="100" height="100"/></li>
      <li><img src="img/4.jpg" width="100" height="100" /></li>
      <li><img src="img/5.jpg" width="100" height="100" /></li>
   </ul>
   <ul id="con2"></ul>
</div>
<script>
var con = document.getElementById('con');
 var con1 = document.getElementById('con1');
 var con2 = document.getElementById('con2');
 var speed = 10;
 con.scrollLeft = 0;
 con2.innerHTML = con1.innerHTML;
 function scrollLeft(){
	 if(con.scrollLeft >= con1.scrollWidth) {
		con.scrollLeft = 0;
		 }else{
		   con.scrollLeft ++; 
		 } 
}
var myScroll = setInterval("scrollLeft()",speed);
con.onmouseover=function(){
	clearInterval(myScroll);
	}
con.onmouseout=function(){
	myScroll = setInterval("scrollLeft()",speed);
	}	
</script>
</body>
</html>

little淇

2016-03-28

源自：信息滚动效果制作 2-3

关注问题我要回答

674

操作

收起

3 回答

时辰哥回答被采纳 +3 积分
2016-03-29

使用scrollLeft的必要条件是

第一：此标签的内容宽度超过了标签本身的宽度。

这个很容易理解，如果内容没有超过标签的宽度，不需要横向的滚动就可以看到所有横向的范围，那在使用scrollLeft的时候肯定是无效的了。

在这里很多新手经常会犯一个错误，内容的大小确实是超过了标签的显示范围，但是却因为浏览器的默认属性换行了，也就是没有在横向上超出，这时候同样是不能使用scrollLeft的。

第二：scrollLeft的值范围是在一定范围内的，不能无限增大。

当内容的最右端可以显示的时候，scrollLeft便不能再增加了。这个也容易理解。以浏览器右侧滚动条为例，这个滚动条肯定是能拖到底的，这个拖动有一定的范围，跟页面内容高度有关。

第三：scrollLeft（包括其他三个）常与定时器一起使用，实现位置移动效果，如滚动。

请看清楚这三个条件，你的问题是因为和第二条冲突了因为你的scrollLeft的值最大只能到340px，而scrollWidth为1040px导致了你的if判断没有进去，也就是scrollLeft永远也不会置0.出现了死循环，

3 回复有任何疑惑可以回复我~

#1

little淇提问者

非常感谢！

2016-03-30 回复有任何疑惑可以回复我~

rainy_li3676598
2016-11-27

我在你的代码上进行了修改，可以实现向左无限循环

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>js图片滚动效果制作</title>

<style>

* { padding:0; margin:0;}

ul,li,ol { list-style:none}

#con{

width:800px; height:220px; margin:50px auto; padding:10px;

border:1px solid #666;

overflow:hidden; position:relative;

}

ul { width:1100px;}

#con1 { position:absolute;}

#con2 { position:absolute; left:1100px;}

li{

list-style:none;

float:left;

margin-right:5px;

}

</style>

</head>

<body>

<div id="con">

<ul id="con1">

<li><img src="pic.jpg" width="269" height="210" /></li>

<li><img src="pic1.jpg" width="269" height="210"/></li>

<li><img src="pic2.jpg" width="269" height="210" /></li>

<li><img src="pic3.jpg" width="269" height="210" /></li>

</ul>

<ul id="con2"></ul>

</div>

<script>

var con = document.getElementById('con');

var con1 = document.getElementById('con1');

var con2 = document.getElementById('con2');

var speed = 10;

con.scrollLeft = 0;

con2.innerHTML = con1.innerHTML;

function scrollLeft(){

if(con.scrollLeft >= con1.scrollWidth) {

con.scrollLeft = 0;

}else{

con.scrollLeft ++;

}

}

var myScroll = setInterval("scrollLeft()",speed);

con.onmouseover=function(){

clearInterval(myScroll);

}

con.onmouseout=function(){

myScroll = setInterval("scrollLeft()",speed);

}

</script>

</body>

</html>

0 回复有任何疑惑可以回复我~

rainy_li3676598
2016-11-26

我觉得是因为你的第二个UL已经自动换行了，所以没有接在后面显示，导致你的con.scrollLeft值无论如何不能等于con1.scrollWidth, 不过我也不知道怎么去解决这个问题，你现在有办法了没有？

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

信息滚动效果制作

参与学习 47751 人
解答问题 321 个

萌妹子带您快速学习滚动效果，掌握无缝滚动和歇间性滚动的制作方法

求问大神！图片向左滚动两轮就停止是什么原因?

我要回答关注问题

意见反馈帮助中心 APP下载