如何知道是不是没有更多图片可禁用（nxt/prv）按钮

Posted 2023-05-08

【中文标题】如何知道是不是没有更多图片可禁用（nxt/prv）按钮

【英文标题】：How to know if there is no more pics to disable (nxt/prv) button如何知道是否没有更多图片可禁用（nxt/prv）按钮

【发布时间】：2011-09-05 22:43:30

【问题描述】：

我有这个代码

css:

div#container
overflow: hidden;
width: 331px;


div#content 
position:relative;

jquery:

$("#left").click(function()
$("#content").animate("right": "+=328px", "slow");
);

$("#right").click(function()
$("#content").animate("right": "-=328px", "slow");
);

html：

<button id="left"><<</button>
<button id="right">>></button>
<div id="container">
<div id="content">
<table border="0">
<tr>
<td><img src="images/img1.gif"></td>
<td><img src="images/img2.gif"></td>
<td><img src="images/img3.gif"></td>
<td><img src="images/img4.gif"></td>
</tr>
<tr>
<td>Description1</td>
<td>Description2</td>
<td>Description3</td>
<td>Description4</td>
</tr>
</table>

当我点击例如 prv 按钮 15 次时，div 每次移动 328px！ 我的问题是如何知道画廊应该停止移动的最后一个位置？

谢谢

【问题讨论】：

更新：jsfiddle.net/9sYWK/2

【参考方案1】：

我不喜欢为此使用表格... div 让您的代码更加流畅，并允许一个优雅的解决方案：is(':last-child') on active div

但既然你是用桌子做的，我可以想到两种方法

一个正在使用计数器，然后根据表格的列数检查它。如果每一步显示多于一列，则它将是总列数/可见列数：

$(function()
    var position = 1;

    $("#left").click(function()
    var size =  $("#content table").find('tr').first().find('td').size();

        if(position < (size / 2) ) 
            $("#content").animate("right": "+=198px", "slow");
            position ++;
        
    );

    $("#right").click(function()
        if(  position > 1) 
            $("#content").animate("right": "-=198px", "slow");
             position --;
        
    );
);

小提琴：http://jsfiddle.net/9sYWK/5/

另一种解决方案是计算#content 移动了多少次。您可以使用$("#content").css('right'); 获取它。既然你知道你总是以 328px 的步长移动你的 div，你可以将它除以 328 来得到它被点击的次数

【讨论】：

谢谢，但是“正确的 btn”不起作用！你也把它设为“1 列”，我想要它“2 列”，就像我的例子一样。

好的，现在你没有将“var count”更改为“var position”，但就像我说的那样，我怎样才能将“2 column”插入“1 column”？

没问题...只需设置大小/2：jsfiddle.net/9sYWK/5（我还修复了变量名...抱歉）

好的，您能否将您的解决方案作为答案，以便我接受。

【参考方案2】：

我不知道，你需要一个计数器。

一种方法是连续计算 td 的数量？

//Add a class to your td's
<td class="img_gallery"><img src="images/img1.gif"></td>
<td class="img_gallery"><img src="images/img2.gif"></td>
<td class="img_gallery"><img src="images/img3.gif"></td>
<td class="img_gallery"><img src="images/img4.gif"></td>

// in your js ...
$td_count = $(".img_gallery").size();

// Now you have many different ways of dealing with this,
// you can have a counter, or allow to move 5 * 328, whatever you want.