function scrollL(){
if(m.scrollLeft>=c1.offsetWidth){
m.scrollLeft=0;
}else{
m.scrollLeft++;
}
}别的地方都差不多，不全写了，方法如上，应该是没什么问题的。
主要是定义了c1，和c2两个ul，他俩里面的li内容有10条，每条给宽度150px；所以ul总长是1500
所以定义了向左滚动的盒子和里面ul的样式
#zuo{
width: 500px;
overflow: hidden;
....等等
}
#zuo ul{
width: 1500px;
float: left;
}问题来了，c1能滚动，一切正常，但是滚到最后的时候就没了，
F12看浏览器，发现c1和c2不在一行，是一上一下，c1滚到头c2没法接。
是c1和c2这两个ul宽度的问题，都是1500，加起来3000，超出100%了，所以c2没有float:left上去，
求大神指点。。。
2015-06-16
ul可以通过position:absolute的方式实现排列。
<!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>
举报
