<!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圖片滾動(dòng)效果制作</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的必要條件是
第一：此標(biāo)簽的內(nèi)容寬度超過了標(biāo)簽本身的寬度。
這個(gè)很容易理解，如果內(nèi)容沒有超過標(biāo)簽的寬度，不需要橫向的滾動(dòng)就可以看到所有橫向的范圍，那在使用scrollLeft的時(shí)候肯定是無效的了。
在這里很多新手經(jīng)常會(huì)犯一個(gè)錯(cuò)誤，內(nèi)容的大小確實(shí)是超過了標(biāo)簽的顯示范圍，但是卻因?yàn)闉g覽器的默認(rèn)屬性換行了，也就是沒有在橫向上超出，這時(shí)候同樣是不能使用scrollLeft的。
第二：scrollLeft的值范圍是在一定范圍內(nèi)的，不能無限增大。
當(dāng)內(nèi)容的最右端可以顯示的時(shí)候，scrollLeft便不能再增加了。這個(gè)也容易理解。以瀏覽器右側(cè)滾動(dòng)條為例，這個(gè)滾動(dòng)條肯定是能拖到底的，這個(gè)拖動(dòng)有一定的范圍，跟頁面內(nèi)容高度有關(guān)。
第三：scrollLeft（包括其他三個(gè)）常與定時(shí)器一起使用，實(shí)現(xiàn)位置移動(dòng)效果，如滾動(dòng)。
請(qǐng)看清楚這三個(gè)條件，你的問題是因?yàn)楹偷诙l沖突了因?yàn)槟愕膕crollLeft的值最大只能到340px，而scrollWidth為1040px導(dǎo)致了你的if判斷沒有進(jìn)去，也就是scrollLeft永遠(yuǎn)也不會(huì)置0.出現(xiàn)了死循環(huán)，
2016-11-27
我在你的代碼上進(jìn)行了修改， 可以實(shí)現(xiàn)向左無限循環(huán)
<!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圖片滾動(dòng)效果制作</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
我覺得是因?yàn)槟愕牡诙€(gè)UL已經(jīng)自動(dòng)換行了， 所以沒有接在后面顯示，導(dǎo)致你的con.scrollLeft值無論如何不能等于con1.scrollWidth, 不過我也不知道怎么去解決這個(gè)問題， 你現(xiàn)在有辦法了沒有？