最近项目中使用到了一个效果，即图片的左右滚动效果。
以前也写过，但是没有整理，这次顺手整理一下吧。
实现的思路很简单。
图片列表使用li 实现，在ul 的最外层包裹上div ，将这个div的overflow设置为隐藏，并且将ul的宽度设置到最够大。这样，里面的图片会水平排列，同时也会被隐藏住。
点击按钮的时候，改变外层div的scrollLeft属性，即相当于拖动它的滚动条。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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宽度足够大！
附件：/detail/lxl631/8417651
