javascript - 关于停止在第一个和最后一个 child 上向左和向右滑动列表的问题

Question

我正在尝试在 This Demo 创建一个简单的轮播 slider 。正如您所看到的， slider 工作正常!但我不知道如何在两端(左和右)停止它。我的意思是我怎样才能控制禁用 left btn 当 ul 的第一个 child 时是左侧第​​一个显示(可见)项目并禁用 Right btn 而 <ul> 的最后一个 child 正在渲染 .well盒子？

这是我到目前为止的简单代码:

$(".leftslide").on("click",function(){
   $(".list-inline").animate({left:'-=187px'}, 300);   
});
$(".rightslide").on("click",function(){
   $(".list-inline").animate({left:'+=187px'}, 300);   
});

var maginLeft =  $("ul>:first-child").css("marginLeft");
var maginRight = $("ul>:last-child").css("marginRight");

alert(maginLeft + maginRight );

我尝试使用 var maginLeft = $("ul>:first-child").css("marginLeft"); 来控制它但它没有完成任务!

谢谢

Answer 1

你需要做这样的事情:

$(".leftslide").on("click",function(){
    rightbtn.removeAttr("disabled");
    current++;
    if(current+images_shown >= images.length) {
         leftbtn.attr("disabled","disabled")
    }
    console.log(imageWidth+offset);  
    var qty=Math.ceil(imageWidth+offset);
    if(current+images_shown==images.length) qty+=offset;
    list.animate({left:'-='+qty+'px'}, 300);

});

完整代码:http://jsfiddle.net/juvian/CXRP5/6/

尽管如此，您仍然需要在动画结束之前单击几次，但这应该让您了解如何解决该问题