Question

我有这个javascript代码：

var next = jQuery('#next') ;
        var prev = jQuery('#prev') ;
        var Scroller = jQuery('#Scroller') ;
        var ScrollerTable = Scroller.children('table').width() ; 
        next.click(function(){
        console.log('width of scroller table ' + ScrollerTable) ;
                var offsetLeft = parseInt(Scroller.css("left")) ;
                console.warn(offsetLeft) ;
                if(offsetLeft == 0)
                {
                    Scroller.animate({left : -140 } , 1000 ) ;
                }else{
                    console.warn(offsetLeft) ;
                    if(ScrollerTable <= offsetLeft  )
                    {
                        console.warn(offsetLeft) ;
                        alert('you are reached the end of scroller use the other btn') ;
                        return false ;
                    }else{
                        Scroller.animate({left : offsetLeft-140 } , 1000) ;
                    }
                }

        });
        prev.click(function(){

                var offsetLeft = parseInt(Scroller.css("left")) ;
                console.warn('offsetLeft in backward ' + offsetLeft) ;
                if(offsetLeft != 0 || offsetLeft > 0 )
                {
                    Scroller.animate({left : offsetLeft +140 } , 1000 ) ;
                }else{
                    jQuery(this).css('cursor' , 'none') ;
                    return false ;
                }
        });

当用户点击next或perv时，多个动画将无法完全完成且offsetLeft值不正确！我该怎么做才能防止

我的第二个问题是，当用户点击下一个btn时，滚动条div滚动到-140px，此操作必须迭代直到达到幻灯片的结尾然后我必须禁用下一个btn。所以我在变量中获得了scrollerTable宽度，并使用offsetLeft Value检查它，但它不起作用！

这里是html

<table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>
        <div style="border:#ccc 1px solid ; padding:1px" class="scroll">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="2%"><img src="../images/dum/scroll_left.gif" width="20" height="165" id="prev" style="cursor:pointer" /></td>
                <td width="96%" valign="top">
                    <div style="width:720px; height:165px ;  position:relative ; overflow:hidden " id="Container">
                        <div style="position:absolute ; left:0" id="Scroller">
                            <table cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    {foreach from=$products item=p}
                                        <td>
                                            <div style="border:#ccc 2px solid ; padding:0px;margin:20px;">
                                                <img src="imgsize.php?w=100&h=100&img=../uploads/product/{$p.xproductid}.jpg" />
                                                <div style="background-color:#ccc ;text-align:center ; padding:5px; ">{$p.xproductname}</div>
                                            </div>
                                        </td>    
                                    {/foreach}
                                </tr>
                            </table>
                        </div>
                    </div>
                </td>
                <td width="2%"><img src="../images/dum/scroll_right.gif" width="20" height="165" id="next"/></td>
              </tr>
            </table>

Answer 1

如果我理解你的话，你可以引入一些可以帮助你的变量。

var nextInProgress=false;
var prevInProgress=false;

然后，你可以这样做：

next.click(function(){
    if(!nextInProgress){
        nextInProgress=true;
        ...
        nextInProgress=false;
    }
});
prev.click(function(){
    if(!prevInProgress){
        prevInProgress=true;
        ...
        prevInProgress=false;
    }
});

然后，当您的next.click（）或prev.click（）函数正在进行时，除非操作已完成，否则再次单击该按钮的用户将不会产生任何内容。

至于你的第二个问题：你使用的是jQuery element.width（）函数吗？如果没有给出预期值，则可能需要进行一些其他宽度计算，例如确定CSS左表和CSS右属性值，然后减去左右以获得宽度。这可能有用，但也许我误解了你的问题。

Answer 2

如果您想使用自己的代码，请考虑在动画调用中使用回调参数。

在按钮的点击事件中：

禁用左键（带有 .attr（“禁用”，“禁用”）或某些其他方法）
触发动画
在回调参数中 .animate（）重新启用按钮。该回调函数直到执行才会执行动画结束了。（如果你有你可能会有更复杂的动画需要使用动画队列。）

或者，你可以使用Ariel Flesler的serialScroll plugin，因为他已经完成了艰苦的工作。

在jquery中阻止多次单击以执行单个操作！

2 个答案: