<!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>
2016-03-29
使用scrollLeft的必要條件是
第一：此標簽的內容寬度超過了標簽本身的寬度。
這個很容易理解，如果內容沒有超過標簽的寬度，不需要橫向的滾動就可以看到所有橫向的范圍，那在使用scrollLeft的時候肯定是無效的了。
在這里很多新手經常會犯一個錯誤，內容的大小確實是超過了標簽的顯示范圍，但是卻因為瀏覽器的默認屬性換行了，也就是沒有在橫向上超出，這時候同樣是不能使用scrollLeft的。
第二：scrollLeft的值范圍是在一定范圍內的，不能無限增大。
當內容的最右端可以顯示的時候，scrollLeft便不能再增加了。這個也容易理解。以瀏覽器右側滾動條為例，這個滾動條肯定是能拖到底的，這個拖動有一定的范圍，跟頁面內容高度有關。
第三：scrollLeft（包括其他三個）常與定時器一起使用，實現位置移動效果，如滾動。
請看清楚這三個條件，你的問題是因為和第二條沖突了因為你的scrollLeft的值最大只能到340px，而scrollWidth為1040px導致了你的if判斷沒有進去，也就是scrollLeft永遠也不會置0.出現了死循環，
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>
2016-11-26
我覺得是因為你的第二個UL已經自動換行了， 所以沒有接在后面顯示，導致你的con.scrollLeft值無論如何不能等于con1.scrollWidth, 不過我也不知道怎么去解決這個問題， 你現在有辦法了沒有？