0

所以我有一个网络应用程序，其中每个面板都是 480x300（状态栏为-20px）和两个导航按钮来左右滚动。

现在一切正常，除了当您继续滚动显示的最大面板时，它会继续运行。

我想知道是否可以在 Jquery .animate() 到达最后一个面板后停止它。

http://jsfiddle.net/gS33Y/

4

5 回答 5

1

嗨，另一个演示 http://jsfiddle.net/qpHSw/ 或 http://jsfiddle.net/yEsDQ/ 或 http://jsfiddle.net/yEsDQ/show

此示例动态计算 ul 中的 li 并据此调整动画。

代码 

   var cur = 1;
var max = $(".scroll-content ul").children("li").length;

$("nav.back").click(function(){

    if (cur+1 > max) return;
    cur++;

    $("#panel").animate({
        marginLeft: "-=500px",
    }, 1000);

});

$("nav.forward").click(function(){
    if (cur-1 < 1) return;
    cur--; 
    $("#panel").animate({
        marginLeft: "+=500px",
    }, 1000);

});​
于 2012-05-02T09:01:02.667 回答
0

如果它是最后一个面板，您可以将 x 坐标位置限制为某个值。

于 2012-05-02T08:50:14.387 回答
0

您可以使用计数来跟踪当前显示。像这样http://jsfiddle.net/gS33Y/3/

于 2012-05-02T08:51:36.877 回答
0

您可以使用元素data-x上的属性#panel来计算面板的数量，并跟踪显示哪个面板以限制移动。此外，您应该将幻灯片边距增加 500 像素（460 宽度 + 20 像素边距 + 20 像素填充）。

试试这个：

var $panel = $("#panel")
$panel.data("slideCount", $("#panel li").length).data("currentSlide", 1);

$("nav.back").click(function() {
    if ($panel.data("currentSlide") < $panel.data("slideCount")) {
        $("#panel").animate({
            marginLeft: "-=500px",
        }, 1000);
        $panel.data().currentSlide++;
    }
});

$("nav.forward").click(function(){
    if ($panel.data("currentSlide") > 1) {
        $("#panel").animate({
            marginLeft: "+=500px",
        }, 1000);
        $panel.data().currentSlide--;
    }
});

示例小提琴

于 2012-05-02T08:54:02.653 回答
0

是否有办法检测窗口宽度何时接近并在幻灯片 5 的末尾终止 marginLeft，在右侧没有空白？

于 2015-08-19T15:04:42.617 回答