最近项目中使用到了一个效果，即图片的左右滚动效果。
以前也写过，但是没有整理，这次顺手整理一下吧。
实现的思路很简单。
图片列表使用li 实现，在ul 的最外层包裹上div ，将这个div的overflow设置为隐藏，并且将ul的宽度设置到最够大。这样，里面的图片会水平排列，同时也会被隐藏住。
点击按钮的时候，改变外层div的scrollLeft属性，即相当于拖动它的滚动条。
代码如下：
<!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>无标题文档</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
function moveleft(){
var scrleft = $("#maincontent").scrollLeft();
if(scrleft>0) $("#maincontent").animate({scrollLeft:(scrleft-82)},500);
}
function moveright(){
var licount = $("#ul1").children("li").size(); //li个数
var perwidth = 20 + 62;//每个li的宽度和左控的和
var liwidths = licount * perwidth; //所有li的总宽度
var targetScrol = liwidths - 300;//li总宽度减去外层div的宽度。即得到滚动条需要滚动的长度
var scrleft = $("#maincontent").scrollLeft();//目前滚动条的滚动长度
if(!isNaN(targetScrol) && (scrleft < targetScrol)){
$("#maincontent").animate({"scrollLeft":scrleft+perwidth},500); //若 目前的滚动条的长度小于 最终需要滚动的长度，则向左拉动滚动条，拉动的距离为 一个li的宽度和它的左外空的距离。
}
}
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
#maincontent{
width:300px;
border:1px solid #0FC;
height:100px;
overflow:hidden;
float:left;
}
#ul1{
list-style-type:none;
width:3000px;
}
#ul1 li{
float:left;
margin-left:20px;
}
.imgdiv{
background-image:url(img.png);
background-position:top center;
background-repeat:no-repeat;
width:62px;
height:62px;
}
.chardiv{
text-align:center;
}
.leftmove{
cursor:pointer;
float:left;
height:100px;
line-height:100px;
text-align:center;
margin-right:10px;
}
.rightmove{
cursor:pointer;
float:left;
height:100px;
line-height:100px;
text-align:center;
margin-left:10px;
}
</style>
</head>
<body>
<div style="position:absolute;left:200px;top:100px;">
<div class="leftmove" οnclick="moveleft()"><<</div>
<div id="maincontent">
<ul id="ul1">
<li>
<div class='imgdiv'></div>
<div class='chardiv'>img1</div>
</li>
<li>
<div class='imgdiv'></div>
<div class='chardiv'>img2</div>
</li>
<li>
<div class='imgdiv'></div>
<div class='chardiv'>img3</div>
</li>
<li>
<div class='imgdiv'></div>
<div class='chardiv'>img4</div>
</li>
<li>
<div class='imgdiv'></div>
<div class='chardiv'>img5</div>
</li>
<li>
<div class='imgdiv'></div>
<div class='chardiv'>img6</div>
</li>
<li>
<div class='imgdiv'></div>
<div class='chardiv'>img7</div>
</li>
<li>
<div class='imgdiv'></div>
<div class='chardiv'>img8</div>
</li>
</ul>
</div>
<div class="rightmove" οnclick="moveright()">>></div>
</div>
</body>
</html>
关键在于，要将外层的div的overflow设置为隐藏，同时内部的ul宽度足够大！
附件：http://download.csdn.net/detail/lxl631/8417651
