效果图：
<!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>
<title></title>
<script type="text/javascript" src="jquery-1.5.min.js" language="javascript"></script>
<title>点击滚动</title>
<style type="text/css">
*{margin:0;padding:0}
li{list-style-type:none;}
img{border:0;}
#container{height:180px;background-color:#D0D7DA;width:810px;position:relative;background:url(h300.png) repeat-x left top ;overflow:hidden;}
.ui-slider-prev,.ui-slider-next{text-indent:-9999px;width:30px;height:30px;cursor:pointer;position:absolute;z-index:1000;top:50%;margin-top:-15px;}
.ui-slider-prev{background:url(hori_large.png) repeat-x left top ;}
.ui-slider-next{background:url(hori_large.png) repeat-x left -30px ;right:0;}
.ui-slider-pic{width:750px;height:180px;position:absolute;left:30px;overflow:hidden;}
.ui-slider-pic ul{width:2550px; height:180px;}
.ui-slider-pic ul li{float:left;width:150px;text-align:center;}
.ui-slider-pic ul li img{width:120px; height:150px;background-color:#ffffff;padding:2px;}
</style>
<script type="text/javascript">
$(function () {
var ti = 0;
var ul = $(".ui-slider-pic ul");
var li = ul.find("li");
var width = li.eq(0).width();
var num = 5;
$("#container .ui-slider-prev").click(function () {
ti--;
go(ti);
});
$("#container .ui-slider-next").click(function () {
ti++;
go(ti);
});
function go(i) {
var move = width * num * i;
if (move < 0) { ti = 0; return }
if (move > width * li.length) { ti = i - 1; return; }
$(".ui-slider-pic ul").animate({ marginLeft: -move }, 1000);
}
});
</script>
</head>
<body>
<div /></li>
</ul>
</div>
</div>
<p>
</p>
<p>
</p>
</body>
</html>