JQuery - カスタムスライダ - 最後に到達したときにスライドを制限する

イメージのサムネイルを表示するためにJQueryを使用してカスタムスライダを作成しました。内部にはスライダが動く外側のdivがあります。しかし、スライドが終わると、私はさらにスライドしたくない（左右に）。どうやってやるの？ここでJQuery - カスタムスライダ - 最後に到達したときにスライドを制限する

は私のコードです - あなたは、HTMLとして保存し、それを実行することができます -

<html> 
<head> 
    <title>Content Slider</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

     }); 

     function left() { 
      $('#inner').animate({ 
       'marginLeft': "-=200px" 
      }, 1000, function() { 
      }); 
     } 

     function right() { 
      if ($('#inner').css('marginLeft') != "0px" && $('#inner').css('marginLeft') != "auto") { 
       $('#inner').animate({ 
        'marginLeft': "+=200px" 
       }, 1000, function() { 
       }); 
      } 

     } 
    </script> 
</head> 
<body> 
    <div style="width: 800px; height: 200px; border: 3px solid #DADADA; overflow: hidden; 
     padding: 5px;"> 
     <div id="inner" style="height: 190px; overflow: hidden;"> 
      <table cellpadding="0" cellspacing="5" style="width: 100%; height: 190px;"> 
       <tr> 
        <td valign="middle" align="center"> 
         <div style="width: 200px; height: 100px; background-color: #DADADA"> 
         </div> 
        </td> 
        <td valign="middle" align="center"> 
         <div style="width: 200px; height: 100px; background-color: #DADADA"> 
         </div> 
        </td> 
        <td valign="middle" align="center"> 
         <div style="width: 200px; height: 100px; background-color: #DADADA"> 
         </div> 
        </td> 
        <td valign="middle" align="center"> 
         <div style="width: 200px; height: 100px; background-color: #DADADA"> 
         </div> 
        </td> 
        <td valign="middle" align="center"> 
         <div style="width: 200px; height: 100px; background-color: #DADADA"> 
         </div> 
        </td> 
        <td valign="middle" align="center"> 
         <div style="width: 200px; height: 100px; background-color: #DADADA"> 
         </div> 
        </td> 
        <td valign="middle" align="center"> 
         <div style="width: 200px; height: 100px; background-color: #DADADA"> 
         </div> 
        </td> 
        <td valign="middle" align="center"> 
         <div style="width: 200px; height: 100px; background-color: #DADADA"> 
         </div> 
        </td> 
       </tr> 
      </table> 
     </div> 
    </div> 
    <table style="width: 800px"> 
     <tr> 
      <td align="left"> 
       <a href="Javascript:left();"><<</a> 
      </td> 
      <td align="right"> 
       <a href="Javascript:right();">>></a> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

任意のアイデア？

出典

2011-07-01 NLV

最初に表示されていない画像の総数を確認することをお勧めします。あなたのケースでは、合計= 4です。ページが最初にロードされたときに表示されます。 - Xとします。次に、何らかのカウンタを使用して、余白が200 * X以上減少しないことを確認します。

コードの実装：

 
var x=4; //current total is 8 (-4 gives x) 
     function left() { 
if(parseInt($('#inner').css('marginLeft'))>-x*200){ // 200 is the size of each image 
      $('#inner').animate({ 
       'marginLeft': "-=200px" 
      }, 1000, function() { 
      }); 
     } 
}

出典

2011-07-01 10:00:00 Erric

あなたは（マージンを考慮して）205のようなものに200を変更し、（それを中心に）左に少しより多くのテーブルを配置する場合があります。 – Erric

最後のサムネイルが完全に表示されないことがあるので、助けてくれません。外側の幅は、サムネイルの幅の倍数ではありません。外側の幅は何でもかまいません。 – NLV

そんなこともありますが、私はいくつかの素晴らしい数学でそれをやったのです... http://fiddle.jshell.net/FJfyQ/3/で実際に見てください - オフセットは計算して、非常に最後の親指のスライド... PS：あなたは外側にthmb幅の整数倍を作ることをお勧めします。 – Erric

JQuery - カスタムスライダ - 最後に到達したときにスライドを制限する

答えて

関連する問題