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

您可能希望將200更改爲類似205（考慮到保證金），並對齊表格多一點的左側（居中）。 – Erric

它不會幫助我，因爲最後的縮略圖可能不會完全顯示。外部寬度不是縮略圖寬度的倍數。外部寬度可以是任何東西。 – NLV

好吧那種糟透了，但我用一些花哨的數學做了...在http://fiddle.jshell.net/FJfyQ/3/上看到它的行動 - 想法是計算偏移量並在最後一個大拇指的幻燈片...... PS：我建議你讓外部是thmb寬度的整數倍（它看起來更好）:) – Erric

JQuery - 自定義滑塊 - 在幻燈片到達結束時限制幻燈片

回答

相關問題