最近項目中使用到了一個效果，即圖片的左右滾動效果。
以前也寫過，但是沒有整理，這次順手整理一下吧。
實現的思路很簡單。
圖片列表使用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" onclick="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" onclick="moveright()">>></div>
</div>
</body>
</html>
關鍵在於，要將外層的div的overflow設置爲隱藏，同時內部的ul寬度足夠大！
附件：http://download.csdn.net/detail/lxl631/8417651