jQuery 双击问题

[d_evil_f]

我想做一个单击按钮，图片对应移动的功能，现在基本实现了，但是有个bug，就是当我双击按钮时，他们计算的值就会出错，有什么方法能防止这样的点击呢？或者是怎样让移动完图片(完成操作后)，才会计算下次点击的值呢？
这是html代码：
<div class="contain">
<div class="contain2">
<ul class="box">
<li><img src="products/01.jpg"/></li>
<li><img src="products/02.jpg"/></li>
<li><img src="products/03.jpg"/></li>
<li><img src="products/05.jpg"/></li>
<li><img src="products/06.jpg"/></li>
<li><img src="products/07.jpg"/></li>
<li><img src="products/08.jpg"/></li>
</ul>
</div>
<input type="button" value="往左" id="b1" />
<br />
<input type="button" value="往右" id="b2" />
</div>
这是js代码：
$(function () {
var length = $('.box li').length;

var bw = (length - 1) * 7 + length * 186;//7代表li里的img个数，186是图片宽度
var scrolled=(length-5)*191;//-5是默认显示的个数，191是因为多了5个像素的margin-left
$('.box').css({ 'width': bw + 'px' });
$('#b1').click(function () {
if ($('.contain2').scrollLeft() < scrolled) {
var doit = $('.contain2').scrollLeft() + 191 + 'px';
$('.contain2').animate({ scrollLeft: doit }, { speed: 'slow' });

}
});
$('#b2').click(function () {
if ($('.contain2').scrollLeft() > 0) {
var doit = $('.contain2').scrollLeft() - 191 + 'px';
$('.contain2').animate({ scrollLeft: doit }, {speed:'slow'});

}
});
});
这是css代码：
.contain
{
margin:0px auto;
width:960px;
}
.contain2
{
margin-top:10px;
overflow:hidden;
width:960px;
height:146px;
}
.box
{
overflow:hidden;
}
.box li img
{
float:left;
width:186px;
height:144px;
/*border:1px solid red;*/
margin-left:5px;
/*overflow:hidden;*/
}
.box li:first-child
{
margin:0px !important;
}
求大神帮帮忙

[d_evil_f]

帮帮忙啊，大神们

[d_evil_f]

引用 2 楼 qq_29594393 的回复:

提供两种方法解决

            $('#b1').click(function () {
               $(".contain2").finish();//立即完成动画
                if ($('.contain2').scrollLeft() < scrolled) {
                    var doit = $('.contain2').scrollLeft() + 191 + 'px';
                    $('.contain2').animate({ scrollLeft: doit }, { speed: 'slow' });
               
                }
            });
            $('#b2').click(function () {
                     $(".contain2").finish();//立即完成动画
                if ($('.contain2').scrollLeft() > 0) {
                    var doit = $('.contain2').scrollLeft() - 191 + 'px';
                    $('.contain2').animate({ scrollLeft: doit }, {speed:'slow'});
                 
                }
            });

问题解决，但是新问题是动画立即结束，体验不好。 方法二

 ;(function animation(){
	            $('#b1').one("click",function () {
	                if ($('.contain2').scrollLeft() < scrolled) {
	                    var doit = $('.contain2').scrollLeft() + 191 + 'px';
	                    $('.contain2').animate({ scrollLeft: doit },function(){
	                    	animation();
	                    });
	               
	                }
	                
	            });
	           
			})()
			;(function animation(){
				$('#b2').one("click",function () {
	                if ($('.contain2').scrollLeft() > 0) {
	                    var doit = $('.contain2').scrollLeft() - 191 + 'px';
	                    $('.contain2').animate({ scrollLeft: doit },function(){
	                    	animation();
	                    });
	                 
	                }
	                 
	            });
	           
			})()

没有任何问题，就是点击事件只绑定一次，双击也没有效果，只有第一次点击动画完毕后才会重新绑定点击事件

可是这个有个bug，就是当你点击向左的按钮时，如果已经到最后一张图时，你再点击向左，然后你再点向右回到第一张图时，这是两个按钮，都不起作用了 这个要怎么解决呢

[d_evil_f]

drop table user

[当作看不见]

那就用第一种解决方案吧

[当作看不见]

提供两种方法解决

            $('#b1').click(function () {
               $(".contain2").finish();//立即完成动画
                if ($('.contain2').scrollLeft() < scrolled) {
                    var doit = $('.contain2').scrollLeft() + 191 + 'px';
                    $('.contain2').animate({ scrollLeft: doit }, { speed: 'slow' });
               
                }
            });
            $('#b2').click(function () {
                     $(".contain2").finish();//立即完成动画
                if ($('.contain2').scrollLeft() > 0) {
                    var doit = $('.contain2').scrollLeft() - 191 + 'px';
                    $('.contain2').animate({ scrollLeft: doit }, {speed:'slow'});
                 
                }
            });

问题解决，但是新问题是动画立即结束，体验不好。 方法二

 ;(function animation(){
	            $('#b1').one("click",function () {
	                if ($('.contain2').scrollLeft() < scrolled) {
	                    var doit = $('.contain2').scrollLeft() + 191 + 'px';
	                    $('.contain2').animate({ scrollLeft: doit },function(){
	                    	animation();
	                    });
	               
	                }
	                
	            });
	           
			})()
			;(function animation(){
				$('#b2').one("click",function () {
	                if ($('.contain2').scrollLeft() > 0) {
	                    var doit = $('.contain2').scrollLeft() - 191 + 'px';
	                    $('.contain2').animate({ scrollLeft: doit },function(){
	                    	animation();
	                    });
	                 
	                }
	                 
	            });
	           
			})()

没有任何问题，就是点击事件只绑定一次，双击也没有效果，只有第一次点击动画完毕后才会重新绑定点击事件