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

Question

我有一个jQuery滑块，它滑过很好。但是我希望滑块不会向左滑动，如果它已经到达第一个孩子，并且如果它已经到达最后一个孩子，就不会向右滑动

我曾尝试在脚本的顶部添加这个，但它似乎并不影响任何东西：

$('.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，才能根据需要进行换行（或创建变量）。 这不是最好的解决方案，但对于你已经完成的工作，我没有看到其他解决方案。 希望它会有所帮助。