控制图片左右滚动

用jquery封装了一个控制图片左右滚动的插件：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>slide</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
* {
	padding:0;
	margin:0;
	list-style: none
}
img{
	border: none
}
#img-slider, #img-slider-2 {
	position: relative;
	 560px;
	height: 80px;
}
.slider-wrap {
	 480px;/*width的值要跟所有的li宽度总和一样*/
	overflow: hidden;
	position: relative;
	height: 150px;
	margin-left: 40px;
}
.slider-wrap ul {
	zoom: 1;
	position: absolute;
	left: 0;
	top: 0;
	 9999px;
}
.slider-wrap ul li {
	float: left;
	 120px;
	text-align: center;
	padding: 5px 0;
}
#prev, #next {
	position: absolute;
	top: 30px;
	left: 0px;
	 40px
}
#next {
	left: auto;
	right: 0px
}
</style>
<script type="text/javascript">
$(function () {
	$("#img-slider").imgScroll();
	$("#img-slider-2").imgScroll();

});

/*插件*/
(function ($) {
    $.fn.imgScroll = function () {
		var isDone = false,
			scrollBox = $(this),
			prevBtn = scrollBox.find("#prev"),
			nextBtn = scrollBox.find("#next"),
			imgBox = scrollBox.find("ul"),
			next_over = imgBox.find("li").width() * imgBox.find("li").length,
			slide_width = $(".slider-wrap").width();
					
		return this.each(function(){
			function setOpacity() {
				imgBox.animate({
					opacity: 1
				}, 800,function(){
					isDone = false;
				})
			}
			function scrollNext() {
			   if(!isDone && next_over + parseInt(imgBox.css("left"),10)  > slide_width){
					isDone = true;
					imgBox.animate({
						left: "+=" + "-" + slide_width,
						opacity: 0.5
					}, 800, setOpacity); 
				}
				//isDone = false	
			}
			function scrollPrev() {
				if(!imgBox.is(':animated') && parseInt(imgBox.css("left"),10) !=0){
					imgBox.animate({
						left: "+=" + slide_width,//不断左移
						opacity: 0.5
					}, 800, setOpacity);
		
				}
			}
			prevBtn.bind('click', scrollPrev); //向前滚动
			nextBtn.bind('click', scrollNext); //向后滚动
			
			
		})
  }
})(jQuery);
</script>
</head>

<body>
<div id="img-slider">
  <button id="prev">prev</button>
  <div class="slider-wrap">
    <ul>
      <li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
      <li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
      <li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
      <li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
      <li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
      <li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
    </ul>
  </div>
  <button id="next">next</button>
</div>

<div id="img-slider-2">
  <button id="prev">prev</button>
  <div class="slider-wrap">
    <ul>
      <li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
      <li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
      <li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
      <li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
      <li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
      <li><a href="#"><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="100"/></a></li>
    </ul>
  </div>
  <button id="next">next</button>
</div>

</body>
</html>