Question

我有这段代码

的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！我的问题是如何知道画廊应该停止移动的最后一个位置？

谢谢

Answer 1

我不喜欢使用表格... Divs使你的代码更加流畅，并且可以提供一个优雅的解决方案：在活动div上是（'：last-child'）

但是既然你正在用桌子做，我可以想到两种方法来做这个

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

$(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来得到点击的次数

Answer 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.

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

2 个答案: