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 - 自定义滑块 - 在幻灯片到达结束时限制幻灯片

回答

相关问题