Question

我有一个很棒的图片库。到达最后一张幻灯片时，图像库只会随机播放到第一张图像。

现在，我想知道的是，当到达最后/第一张图像时，如何禁用下一张或上一张图像？我的代码是......

滑块脚本

function Slider(container, nav) {

    this.container = container;
    this.nav = nav.show();

    this.imgs = this.container.find('img');
    this.imgWidth = this.imgs[0].width;
    this.imgsLen = this.imgs.length;

    this.current = 0; 

}

Slider.prototype.transition = function ( coords ) {
    this.container.animate({
        'margin-left': coords || -( this.current * this.imgWidth ) 
    });
};

Slider.prototype.setCurrent = function( dir ) {
    var pos = this.current;
    pos += ( ~~( dir === 'next' ) || -1); 
    this.current = ( pos < 0  ) ? this.imgsLen  - 1 : pos % this.imgsLen; 
    return pos;
};

HTML

<div class="slider">
    <ul>
        <li>
            <img src="http://..../spacer.gif" height="400" />
        </li>
        <li>
            <img src="http://..../spacer.gif" height="400" />
        </li>
    </ul>
</div>

<div id="slider-nav">
    <button class="previous" data-dir="prev">Previous</button>
    <button data-dir="next">Next</button>
</div>

滑块启动

<script>
    var container = $('div.slider').css('overflow', 'hidden').children('ul');

    var slider = new Slider( container, $('#slider-nav') );

        slider.nav.find('button').on('click', function() {
        slider.setCurrent( $(this).data('dir') );
        slider.transition();
    });
</script>

我知道这可能是构建滑块的一种近似的方式，但我没有长时间使用jQuery。

我尝试过按照......的方式做的事情。

if (this.current = this.imgsLen - 1) {
    $(':button:contains("previous")').attr('disabled', 'disabled');
}

但无济于事。我也用Google搜索过，但仍然没有提出任何有效的方法。

如果您需要玩一个，heres一个jsFiddle它（忽略图像不会自动滑动的事实，这是因为li有边框！）

Answer 1

这是一个快速修复。我对代码的关注度不高，所以我不确定它是否是解决问题的最佳方式，但看起来它对我有用。

http://jsfiddle.net/Qqk3U/7/

下面详述的更改。

Slider.prototype.setCurrent = function( dir ) {
    //remove the disabled attribute from both buttons
    this.nav.find('button[data-dir="next"]').removeAttr("disabled");
    this.nav.find('button[data-dir="prev"]').removeAttr("disabled");
    var pos = this.current;
    pos += ( ~~( dir === 'next' ) || -1); 
    this.current = ( pos < 0  ) ? this.imgsLen  - 1 : pos % this.imgsLen; 
    //if new pos is equal to the amount of images add the disabled attribute to next
    if(pos==this.imgsLen-1) this.nav.find('button[data-dir="next"]').attr("disabled", "disabled");
    //if new pos is equal to 0 add disabled attr to prev
    if(pos==0) this.nav.find('button[data-dir="prev"]').attr("disabled", "disabled");
    return pos;
};

然后

<button disabled="disabled" class="previous" data-dir="prev">Previous</button>

默认情况下禁用上一个按钮，因为您在第一张图片上并且不想倒退。

Answer 2

好的，所以你有一些事情要发生。在此代码中，有两个问题

if (this.current = this.imgsLen - 1) {
    $(':button:contains("previous")').attr('disabled', 'disabled');
}

首先，分配。 this.current = this.imgsLen - 1。注意单=？每当代码运行时，您都会设置this.current。

其次，:button是$("button, input[type='button']")的简写。它会工作但是因为你知道你只有<botton>，所以你也可以使用$('button')，因为它会更快。

最后，以前提交的代码，但这是另一种选择。将导航更改为上一课和下一课：

<div id="slider-nav">
    <button class="previous" data-dir="prev">Previous</button>
    <button class="next" data-dir="next">Next</button>
</div>

然后将此添加到您的过渡功能：

if (this.current == this.imgsLen - 1) {
    console.log('disable next')
    $('button.next').addClass('disabled').attr('disabled', true)
    $('button.previous').removeClass('disabled').attr('disabled', false)
}
else if(this.current == 0) {
    console.log('disable previous')
    $('button.next').removeClass('disabled').attr('disabled', false)
    $('button.previous').addClass('disabled').attr('disabled', true)
}
else {
    console.log('enable all')
    $('button.next').removeClass('disabled').attr('disabled', false)
    $('button.previous').removeClass('disabled').attr('disabled', false)
}

这是一个有效的版本：

http://jsfiddle.net/Qqk3U/15/

希望有所帮助。

禁用“下一个”或“上一个”按钮？

2 个答案: