javascript - 当最后一项在 javascript 的轮播中可见时如何禁用链接/按钮/等

Question

我已经构建了一个旋转木马，但我希望当最后一个/第一个项目在视口(viewport)中时禁用按钮，即当最后一个项目可见时，然后禁用“下一步”按钮。我正在使用 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对比vectors对比deques .

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