Question

我用jquery制作了一个旋转木马滑块，我有一些产品。当我到达最后一个产品时，我希望滑块停止滑动，到目前为止我能够做的是在最后一个产品不可见时停止滑动，但这不是我需要的。它应该在最后一个产品可见时停止，我该如何实现？

HTML

pcmd = "putty.exe -m ""c:\mycommands.sh"""

JQUERY

<div class="controls">
    <div class="control-left">left</div>
    <div class="control-right">right</div>
</div>
<div class="container">
    <div class="sliderHolder">
        <div class="productsWrapper">
            <article>
                <img src="http://www.sha.org/bottle/missionbottle.jpg">
            </article>
            <article>
                <img src="http://www.sha.org/bottle/missionbottle.jpg">
            </article>
            <article>
                <img src="http://www.sha.org/bottle/missionbottle.jpg">
            </article>
            <article>
                <img src="http://www.sha.org/bottle/missionbottle.jpg">
            </article>
            <article>
                <img src="http://www.sha.org/bottle/missionbottle.jpg">
            </article>
            <article>
                <img src="http://www.sha.org/bottle/missionbottle.jpg">
            </article>
        </div>
    </div>
</div>

CSS

var container = $(".sliderHolder");
var containerProducts = $(".productsWrapper").width();

var animating = false;

$(document).on("click", ".control-right", function () {
    if (parseInt(container.css("right"), 10) <= containerProducts) {
        animating = true;
        container.stop().animate({
            'right': "+=401px"
        }, 600, function () {
            animating = false;
        });
    }
});


$(document).on("click", ".control-left", function () {debugger;
    if (parseInt(container.css("right"), 10) > 0) {

        animating = true;
        container.stop().animate({
            'right': "-=401px"
        }, 600, function () {
            animating = false;
        });

    }

});

$(".control-left, .control-right").click(function () {
    if (animating) {
        return false;
    }
});

Answer 1

如果您的文章总是200px，并且您当时将2篇文章滑动，则if - 语句应为if (parseInt(container.css("right"), 10) <= (containerProducts - 400)) 这样，它会检查是否还有两个适合。如果没有，它将不会动画。

但是你应该尝试让它更有活力。但这回答了你的问题。

（小提琴：https://jsfiddle.net/3zcn19ms/5/）

编辑：

嘿，因为你在这个答案下面给出的评论，我改变了一些代码。看看这是否有助于你：

https://jsfiddle.net/3zcn19ms/22/

现在使用第一张图片的大小（这只有在所有图片具有完全相同的宽度时才正确）以及包装中的文章数量。

Jquery滑块 - 向右滑动

1 个答案:

编辑：