Question

好的，我已经做了一些搜索，但我找不到任何适用于我的代码的内容，所以我想我会试一试。

我正在为我的页面构建幻灯片式导航（主要是作为学习练习），我希望能够隐藏＆＃34;上一页＆＃34;第一张幻灯片上的按钮和＆＃34; next＆＃34;最后一张幻灯片上的按钮，但我似乎无法让它工作。

这是我到目前为止所拥有的：

HTML

<div class="slide active-slide first">
    <div class="content">
        <p>First Slide</p>
    </div>
</div>

<div class="slide">
    <div class="content">
        <p>second slide</p>
    </div>
</div>
<div class="slide last">
    <div class="content">
        <p>third slide</p>
    </div>
</div>
<div class="slider-nav">
    <div class="prev">
        prev
    </div>
    <div class="next">
        next
    </div>
</div>

jquery的

var main = function() { 
    if($('.active-slide').hasClass('first')) {
       $('.prev').hide(); 
} else if ($('.active-slide').hasClass('last')) {
           $('.next').hide();
} else {
    $('.prev').show();
    $('.next').show();
}
$('.next').click(function() {
        var currentSlide = $('.active-slide');
        var nextSlide = currentSlide.next('.slide');

//if nextslide is last slide, go back to the first
        if(nextSlide.length===0) {
            nextSlide = $('.slide').first();
        } 

        currentSlide.fadeOut(500).removeClass('active-slide');
        nextSlide.fadeIn(1100).addClass('active-slide');

    });

//prev slide function
    $('.prev').click(function() {
        var currentSlide = $('.active-slide');
        var prevSlide = currentSlide.prev('.slide');

        if(prevSlide.length===0) {
            prevSlide = $('.slide').last();
        }

        currentSlide.fadeOut(600).removeClass('active-slide');
        prevSlide.fadeIn(600).addClass('active-slide');
    });

};

$(document).ready(main);

这里JSFiddle有同样的事情。我觉得有一个更好的方法来做到这比使用＆＃34;第一个＆＃34;和＆＃34;最后＆＃34;我的第一张和最后一张幻灯片的课程，但我认为这可能更容易。我虽然对所有建议持开放态度！

Answer 1

请查看更正后的小提琴：http://jsfiddle.net/794f4yvw/12/ 我已将prev / next check添加为单独的函数，并在每次切换幻灯片时调用：

function checkNavigation() {

    if ($('.active-slide').hasClass('first')) {
        $('.prev').hide();
        $('.next').show();
    } else if ($('.active-slide').hasClass('last')) {
        $('.next').hide();
        $('.prev').show();
    } else {
        $('.prev').show();
        $('.next').show();
    }

}

在第一页/最后一页上隐藏上一页/下一页按钮

1 个答案: