当最后一项在javascript中的旋转木马中可见时，如何禁用链接/按钮等

我强烈建议您使用其他方法来检查您在转盘中的位置。例如，您可以使用列表中的.index。

禁用按钮的最佳方法是检查当前幻灯片索引，并将禁用的类添加到控件中，并且仅根据设置动画

• 上一篇：$(".slide").index() > 0
• 下一篇：$(".slide").index() < $(".slide-wrapper ul").index() < $(".slide").index()

下面是我为您制作的一个JSFiddle示例。还有一个如何创建自己的插件的方法，在你的项目中可能会考虑到这一点。只要朝着正确的方向推动你，祝你好运！

这是代码

(function( $ ) {
    $.fn.projectCarousel = function(){
        var $slides = $(".slide", this),
            $current_slide = $(".slide:first-child", this),
            $prev = $(".controls a.prev", this),
            $next = $(".controls a.next", this);
        if($current_slide.index() <= 0) $prev.addClass("disabled");
        $prev.click(function(e){
            e.preventDefault();
            if($current_slide.index() > 0){
                if($prev.hasClass("disabled")) $prev.removeClass("disabled");
                $(".slide-wrapper ul").animate({ marginLeft: '+=' + $current_slide.outerWidth(true)+ 'px' });
                $current_slide = $current_slide.prev();
            }
            if($current_slide.index() <= 0){
                //disable previous
                $prev.addClass("disabled");
                $next.removeClass("disabled");
            }
        });
        $next.click(function(e){
            e.preventDefault();
            if($current_slide.index() < $slides.index()){
                if($next.hasClass("disabled")) $next.removeClass("disabled");
                $(".slide-wrapper ul").animate({ marginLeft: '-=' + $current_slide.outerWidth(true)+ 'px' });
                $current_slide = $current_slide.next();
            }
            if($current_slide.index() >= $slides.index()){
                //disable next
                $next.addClass("disabled");
                $prev.removeClass("disabled");
            }
        });
    }
})( jQuery );
$(".slideshow").projectCarousel();

基于阵列

另一种方法是将每个幻灯片元素存储在一个数组中。这种方法非常有效和可靠。这种方法的主要缺点是它占用了内存，但除非你有很多幻灯片，否则不应该成为问题。它也非常有用，因为你可以决定你想跳到哪张幻灯片。

一个基于数组的旋转木马的例子可以像这个JSFiddle中那样完成。

基本上，所有动画都包含在一个函数_to_slide(index)中，该函数接受一个参数："我应该将动画设置到哪个帧？"。由于数组是基于数字的，因此更易于管理和控制。

以下是代码（包括html和css，更改了一些以适应更多功能）

Javascript

(function( $ ) {
    $.fn.projectCarousel = function(){
        var $slides = $(".slide", this),
            $current_slide = $(".slide:first-child", this),
            $prev = $(".controls a.prev", this),
            $next = $(".controls a.next", this);
        if($current_slide.index() <= 0) $prev.addClass("disabled");
        $prev.click(function(e){
            e.preventDefault();
            if($current_slide.index() > 0){
                if($prev.hasClass("disabled")) $prev.removeClass("disabled");
                $(".slide-wrapper ul").animate({ marginLeft: '+=' + $current_slide.outerWidth(true)+ 'px' });
                $current_slide = $current_slide.prev();
            }
            if($current_slide.index() <= 0){
                //disable previous
                $prev.addClass("disabled");
                $next.removeClass("disabled");
            }
        });
        $next.click(function(e){
            e.preventDefault();
            if($current_slide.index() < $slides.index()){
                if($next.hasClass("disabled")) $next.removeClass("disabled");
                $(".slide-wrapper ul").animate({ marginLeft: '-=' + $current_slide.outerWidth(true)+ 'px' });
                $current_slide = $current_slide.next();
            }
            if($current_slide.index() >= $slides.index()){
                //disable next
                $next.addClass("disabled");
                $prev.removeClass("disabled");
            }
        });
    }
})( jQuery );
$(".slideshow").projectCarousel();

HTML

<div class="slideshow">
  <div class="controls">
    <a href="#" class="start"><-</a>
    <a href="#" class="prev">-</a>
    <input class='select' type='text' value='1' />
    <a href="#" class="next">+</a>
    <a href="#" class="end">-></a>
  </div>
  <div class="slide-wrapper">
    <ul>
        <li class="slide">
            <article>
                <h3>Some title here (nav 1)</h3>
                <p>Over the past few years, mobile web usage has considerably increased.</p>
            </article>
        </li>
        <li class="slide">
            <article>
                <h3>Some title here (nav 2)</h3>
                <p>Over the past few years, mobile web usage has considerably increased.</p>
            </article>
        </li>
        <li class="slide">
            <article>
                <h3>Some title here (nav 3)</h3>
                <p>Over the past few years, mobile web usage has considerably increased.</p>
            </article>
        </li>
        <li class="slide">
            <article>
                <h3>Some title here (nav 4)</h3>
                <p>Over the past few years, mobile web usage has considerably increased.</p>
            </article>
        </li>
        <li class="slide">
            <article>
                <h3>Some title here (nav 5)</h3>
                <p>Over the past few years, mobile web usage has considerably increased.</p>
            </article>
        </li>
        <li class="slide">
            <article>
                <h3>Some title here (nav 6)</h3>
                <p>Over the past few years, mobile web usage has considerably increased.</p>
            </article>
        </li>
    </ul>
  </div>
</div>

CSS

.slideshow {
      margin: 45px auto 0;
      width: 318px;
}
.slideshow .slide-wrapper {
    width:325px;
    padding: 10px;
    overflow: hidden;
}
.slideshow ul {
    width: 2088px;
}
.slideshow .slide {
    float: left;
    margin-right: 30px;
}
.slideshow .slide article {
    background: #fff;
    bottom: 0px;
    box-shadow: -2px -1px 8px #bbb;
    padding: 10px;
    width: 298px;
    z-index: 5;
}
.controls {
    position: relative;
    display: block;
    overflow: auto;
    clear: both;
    text-align: center;
}
.controls a {
    color: #fff;
    display: block;
    font-weight: bold;
    height: 18px;
    width: 18px;
    background-color: #000;
    text-decoration: none;
    text-align: center;
    line-height: 16px;
    display: inline-block;
}
input.select{
    width: 35px;
    text-align: center;
}
a.disabled{
    cursor: default;
    background-color: #d6d6d6;
}

如果你对这个主题背后的一些理论感兴趣，你可以阅读它们
链表vs矢量vs deques。

尽管大多数链接都指向C++库，但该理论适用于所有编程语言。

与其取消绑定单击，不如尝试以下操作：

        if (count === (slide.length - 1)) {
            // disable button
            thisElm.addClass('disabled');
        } else {
            thisElm.removeClass('disabled');
        }

然后，在主.on('click'...)事件处理程序中，首先检查disabled类：

$(this.CONTROL).on('click', 'a', function (e) {
    var thisElm = $(this);
    e.preventDefault();
    if (!thisElm.hasClass('disabled'){
        //do the rest inside here
    }
});

如果没有名称空间，您需要传入函数才能解除绑定，因此您需要将函数进行回调，并将其作为第二个参数传入unbind，或者您可以使用类似carousel.click的名称空间，然后只解除该名称空间的绑定。