Question

我已经制作了一个旋转木马，但是当最后一个项目在视口中时，我想要禁用这些按钮，即当最后一个项目可见时，然后禁用“下一个”＆＃39;按钮。我使用的是unbind('click')，但它无法使用。

请告诉我。

JS：

var MYPROJECT = {
CONTROL: '.controls',
SLIDELIST: '.slide-wrapper ul',

init: function(){
    this.projectCarousel();
},

projectCarousel: function(){
    var self = this,
        jqs_slideList = $(self.SLIDELIST),
        slide = jqs_slideList.find('.slide'),
        slideWidth = jqs_slideList.find('.slide').outerWidth(true),
        firstSlidePos = slide.first().position().left,
        lastSlidePos = slide.last().position(),
        count = 0;

    $(this.CONTROL).on('click', 'a', function (e) {
        var thisElm = $(this);
        e.preventDefault();

        if (thisElm.hasClass('prev')) {/* if prev button is clicked */

            jqs_slideList.animate({ marginLeft: '+=' + slideWidth + 'px' });

        } else if (thisElm.hasClass('next')) {/* if next button is clicked */

            jqs_slideList.animate({ marginLeft: '-=' + slideWidth + 'px' });

            count++;

            if (count === (slide.length - 1)) {

                // disable button
                thisElm.unbind('click').css({ /* this should be in css class */
                        opacity: 0.5,
                        cursor: 'default'
                    });
            } 
        }
    });
}
};

MYPROJECT.init();

HTML：

<div class="slideshow">
  <div class="controls">
    <a href="#" class="prev">-</a>
    <a href="#" class="next">+</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>
    </ul>
  </div>
</div>

CSS：

.slideshow {
  margin: 45px auto 0;
  width: 318px;
}

.slideshow .slide-wrapper {
width:325px;
padding: 10px;
overflow: hidden;
}

.slideshow ul {
width: 696px;
}

.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;
top: 150px;
}

.controls a {
color: #fff;
display: block;
font-size: 36px;
font-weight: bold;
height: 65px;
position: absolute;
text-indent: -9999px;
width: 65px;
}

.controls .prev {
left: -115px;
}

.controls .next {
right: -115px;
}

非常感谢

Answer 1

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

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

设置动画。

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

这是我为你制作的JSFiddle example。还有一个how to create your own plugin可能在您的项目中考虑好。只是给你一个正确的方向，祝你好运！

这是代码

(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();

基于数组的

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

基于数组的轮播的示例可以像this 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;
}

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

尽管大多数链接都是针对C ++库的，但这种理论对所有编程语言都是合理的。

Answer 2

不要取消绑定点击，请尝试以下操作：

        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
    }
});

Answer 3

如果没有namesapce，你需要传入函数才能取消绑定，所以你需要让你进入回调函数并将其作为第二个arg传递给unbind或者你可以使用像carousel.click然后解除绑定名称空间。

如何在javascript中的旋转木马中看到最后一个项目时禁用链接/按钮/等

3 个答案:

基于数组的