图图：
很多网站上都有这个单击左右箭头滚动图片的效果；
看下代码：
<!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=gb2312" /><script type="text/javascript" src="js/jquery-1.8.3.js"></script><title>jq控制左右箭头滚动图片列表</title><style type="text/css">*{ margin:0; padding:0;font-size: 12px;}ul{ list-style:none;}.slider{ width:960px;border: 1px #708090 solid; padding:10px 20px;height: 130px;margin: 100px auto;position: relative;cursor: pointer;}#slider_pic{ width: 840px;margin:0 auto;overflow: hidden;height: 130px;position: relative;}.prev,.next{position: absolute;width: 20px;height: 20px;cursor: pointer;top:60px;background-color: #daa520; text-align: center;line-height: 20px;font-weight: bold;color: #fff;}.next{right: 20px;}.no_click{background-color: #808080;}#slider_pic li{float: left;margin-right: 10px;}#slider_pic ul{position: absolute;left: 0;}</style><script type="text/javascript">$(function(){var oPic=$('#slider_pic').find('ul');var oImg=oPic.find('li');var oLen=oImg.length;var oLi=oImg.width();var prev=$("#prev");var next=$("#next");oPic.width(oLen*210);//计算总长度var iNow=0;var iTimer=null;prev.click(function(){if(iNow>0){ iNow--;}ClickScroll();})next.click(function(){if(iNow<oLen-3){ iNow++}ClickScroll();})function ClickScroll(){iNow==0? prev.addClass('no_click'): prev.removeClass('no_click');iNow==oLen-3?next.addClass("no_click"):next.removeClass("no_click");oPic.animate({left:-iNow*210})}})</script></head><body><div class="slider"><span class="prev no_click" id="prev"><<</span><span class="next " id="next">>></span><div id="slider_pic"><ul><li><img src="images/tu1.jpg" width="200" height="130" /></li><li><img src="images/tu2.jpg" width="200" height="130" /></li><li><img src="images/tu3.jpg" width="200" height="130" /></li><li><img src="images/tu4.jpg" width="200" height="130" /></li><li><img src="images/tu5.jpg" width="200" height="130" /></li><li><img src="images/tu6.jpg" width="200" height="130" /></li><li><img src="images/tu7.jpg" width="200" height="130" /></li></ul></div></div></body></html>
代码说明：
两层div，内层放ul列表，每个列表项链接一个图片；左右箭头在外层div中，其span标签的id分别为prev和next;
内层div的css类为slider_pic，外层div的css类为slider；
.no_click定义滚动到头不可点击的颜色；
cursor:pointer定义鼠标光标为一只手的形状；
滚动的基本代码在ClickScroll()函数中，
oPic.animate({left:-iNow*210})
调用jquery的animate函数，每点击一下鼠标，增大或减小left属性值；
如果左端已经滚到头，为prev添加css类'no_click'，否则移除该css类；
右端滚到头，为next添加css类'no_click'，否则移除该css类。
