向左無縫滾動(dòng)實(shí)現(xiàn)了一半，遇到點(diǎn)問題，求大神指導(dǎo)
function?scrollL(){
if(m.scrollLeft>=c1.offsetWidth){
????????m.scrollLeft=0;
????}else{
????????m.scrollLeft++;
????}
}別的地方都差不多，不全寫了，方法如上，應(yīng)該是沒什么問題的。
主要是定義了c1，和c2兩個(gè)ul，他倆里面的li內(nèi)容有10條，每條給寬度150px；所以u(píng)l總長(zhǎng)是1500
所以定義了向左滾動(dòng)的盒子和里面ul的樣式
#zuo{
width:?500px;
overflow:?hidden;
....等等
}
#zuo?ul{
width:?1500px;
float:?left;
}問題來了，c1能滾動(dòng)，一切正常，但是滾到最后的時(shí)候就沒了，
F12看瀏覽器，發(fā)現(xiàn)c1和c2不在一行，是一上一下，c1滾到頭c2沒法接。
是c1和c2這兩個(gè)ul寬度的問題，都是1500，加起來3000，超出100%了，所以c2沒有float:left上去，
求大神指點(diǎn)。。。
2016-11-27
ul可以通過position:absolute的方式實(shí)現(xià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>
2015-12-17
如果只是位置接不上了，試試把ul設(shè)置成內(nèi)聯(lián)或內(nèi)聯(lián)塊~~display:inline; ? ?display:inline-block;