Question

我有一个jQuery Slider，它滑得非常好。但是我希望滑块在到达第一个孩子时不向左滑动，如果到达最后一个孩子则不向右滑动

我尝试在我拥有的脚本之上添加它，但它似乎没有任何效果：

$('.yearslist').find('.li:last-child').stop(true, true);

我在下面创建了jsFiddle或查看我的JS：

JS / js.js

$(document).ready (Initialize);

function Initialize(){
    InitList();
}

var moveLeft = false;
var moveRight = false;

var left = function() {
    if (moveLeft)

        $(".yearslist").animate({ "marginLeft": "-=5px" }, 50, 'linear', left);
                    $('.yearslist').find('li:first-child').stop(true, true);


};

var right = function() {
    if(moveRight)

        $(".yearslist").animate({ "marginLeft": "+=5px" }, 50, 'linear', right);
                                $('.yearslist').find('.li:last-child').stop(true, true);


};

function InitList() {
    $("span#NavigateForward").hover(
        function() { moveLeft=true; left(); },
        function() { moveLeft=false; }
    );
    $("span#NavigateBackward").hover(
        function() { moveRight=true; right(); },
        function() { moveRight=false; }
    );
}

Answer 1

你可以这样做：

if ($('.yearslist').find('li:last-child').offset().left < $('#years').width() - 120) {
    moveLeft = false;
}

和

if ($('.yearslist').find('li:first-child').offset().left > 86) {
    moveRight = false;
}

看一下 Fiddle 。

您必须调整值120和86，以便根据需要进行换行（或创建变量）。这不是最好的解决方案，但对于你已经完成的工作，我没有看到其他解决方案。希望它会有所帮助。

jquery在第一个孩子和最后一个孩子停止滑块

1 个答案: