最近要实现一个项目的一个图片循环左右滚动的效果，做了好久也没有搞出来，不是不会，而是忽略了一个细节。
百度了好久，也没有看出来有什么不同，定时器啥的都定义好了，然而它就是不动，简直是碉堡了，之后仔细看，才发现我的ul的样式设置得有问题，原理上应该是外层div的宽度固定，并且overflow属性设置为hidden,然而这并不够，还要设置ul的宽度大于外层div的宽度
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript test</title>
<style type="text/css">
.picture{
width:1030px;
border:1px solid black;
position: relative;
height: 120px;
margin: 10px auto 0;
overflow: hidden;
}
.picture ul{
position: relative;
padding: 0;
width: 3062px;
margin:0;
}
.picture li{
width: 162px;
height: 100px;
float: left;
display: inline-block;
margin:10px 9.4px 10px 0;
}
.picture li:first-child{
margin-left: 0;
}
.picture li:last-child{
}
.picture li img{
height: 100%;
width: 100%;
border:none;
}
</style>
</head>
<body>
<div id="picture">
<ul id="area1">
<li><img src="5.jpg" ></li>
<li><img src="6.jpg" ></li>
<li><img src="7.jpg" ></li>
<li><img src="8.jpg" ></li>
<li><img src="1.jpg" ></li>
<li><img src="2.jpg" ></li>
<li><img src="3.jpg" ></li>
<li><img src="2.jpg" ></li>
<li><img src="3.jpg" ></li>
</ul>
</div>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var speed = 10;
var picture = $(‘#picture‘);
var ul = $(‘ul‘,picture);
var li = $(‘li‘,ul);
ul.append(li.slice(0,6).clone()) ;
alert(ul.width());
var timer = setInterval(Marquee,speed);
alert(picture.scrollLeft());
picture.hover(function() {
clearInterval(timer);
},function(){
//离开继续调用
timer=setInterval(Marquee,speed);
});
function Marquee(){
if(picture.scrollLeft()>= 1540){
picture.scrollLeft(0);
}
else
{
picture.scrollLeft(picture.scrollLeft()+1);
}
}
console.log(picture.scrollLeft());
</script>
</html>
这些jquery代码相信一般的人都能看懂，这里就不解释了，有一点很关键，就是为了展示循环的效果，需要将页面中的li追加到已有的li后面，还有就是这里我的js代码picture.scrollLeft()>= 1540中设置的是1540，其实这个值是随便设的，只要你达到你想要的效果就行，还是掌握的知识不够精细啊
原文：http://my.oschina.net/sunshinewyf/blog/529563