禁用 Carousel Prev Next 按钮

Question

您好，如果分别显示第一个和最后一个 div，我需要在以下脚本中禁用上一个和下一个锚点。 这是它的小提琴。 我有几个锚点，单击时会显示相应的 div。 我也有上一个和下一个锚点，点击它们分别转到下一个和上一个 div。

我希望禁用“Prev”，以防它显示第一个 div，即 div0，并禁用“Next”，以防它显示最后一个 div，即 div4。 另外请让我知道代码是否在某处损坏。 谢谢

    <a class="prev">prev</a>  &nbsp;
    <a class="next">next</a>
    <a class="anc" id="an0">A1</a>
    <a class="anc" id="an1">A2</a>
    <a class="anc" id="an2">A3</a>
    <a class="anc" id="an3">A4</a>
    <a class="anc" id="an4">A5</a>



    <div class="zdivs">
            <div id="q0" class="hidepiece">
                Lorem ipsum dolor sit amet
            </div>
            <div id="q1" class="hidepiece">
                 consectetuer adipiscing elit
            </div>
            <div id="q2" class="hidepiece">
                sed diam nonummy nibh euismod tincidunt 
            </div>
            <div id="q3" class="hidepiece">
                laoreet dolore magna aliquam erat volutpat
            </div>
            <div id="q4" class="hidepiece">
                Ut wisi enim ad minim veniam
            </div>
    </div>

这是用于隐藏所有类名为“hidepiece”的 div 并在单击锚点时一一显示的 jQuery

<!--One by one navigation class anc hidepiece-->
<script>
$(document).ready(function() {
$("div.hidepiece").hide();
$("a.anc").click(function() {
    var id = $(this).attr("id");
    var divId = id.replace("an", "q");
    $("div.hidepiece").hide();
    $("div#" + divId).fadeIn("slow");
    $("#zdivs").scrollTop(0);//scrolls zdiv to top
  });
});
</script>

<!--previous next class zdivs-->
<script>
$(document).ready(function(){
$(".zdivs div").each(function(e) {
    if (e != 0)
        $(this).hide();
});

$(".next").click(function(){
  $("#zdivs").scrollTop(0);
    if ($(".zdivs div:visible").next().length != 0)
        $(".zdivs div:visible").next().fadeIn("slow").prev().hide();
    else {
        $(".zdivs div:visible").hide();
        $(".zdivs div:first").fadeIn("slow");
    }
    return false;
});

$(".prev").click(function(){
  $("#zdivs").scrollTop(0);
    if ($(".zdivs div:visible").prev().length != 0)
        $(".zdivs div:visible").prev().fadeIn("slow").next().hide();
    else {
        $(".zdivs div:visible").hide();
        $(".zdivs div:last").fadeIn("slow");
    }
    return false;
  });
});
</script>

Answer 1

其实这就是你所需要的：

 $('.Gal').each((i, Gal) => { let c = 0; // Counter to keep track of current slide index const $slides = $('.Gal-slides > *', Gal), $prev = $('.Gal-prev', Gal), $next = $('.Gal-next', Gal), $buttons = $('.Gal-nav button', Gal), tot = $slides.length, anim = () => { $slides.removeClass('is-active').eq(c).addClass('is-active'); $buttons.removeClass('is-active').eq(c).addClass('is-active'); // Comment the following lines if you want always PREV/NEXT visible $prev.toggle(c > 0); $next.toggle(c < tot - 1); }; $prev.add($next).on('click', ev => { c = ev.currentTarget == $next[0] ? ++c : --c; if (c > tot - 1) c = 0; if (c < 0) c = tot - 1; anim(); }); $buttons.on('click', ev => { c = $buttons.index(ev.currentTarget); anim(); }); anim(); // init });

 .Gal { position: relative; height: 100px; } .Gal-slides > * { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #ddd; transition: 0.4s; opacity: 0; visibility: hidden; pointer-events: none; } .Gal-slides > *.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .Gal-prev, .Gal-next { position: absolute; top: 50%; transform: translateY(-50%); } .Gal-prev { left: 0; } .Gal-next { right: 0; } .Gal-nav { position: absolute; bottom: 0; width: 100%; text-align: center; } .Gal-nav button.is-active { background: red; }

 <div class="Gal"> <div class="Gal-slides"> <div class="is-active">1 Lorem ipsum dolor sit amet</div> <div>2 consectetuer adipiscing elit</div> <div>3 sed diam nonummy nibh euismod tincidunt</div> <div>4 laoreet dolore magna aliquam erat volutpat</div> <div>5 Ut wisi enim ad minim veniam</div> </div> <button type="button" class="Gal-prev">Prev</button> <button type="button" class="Gal-next">Next</button> <div class="Gal-nav"> <button type="button" class="is-active">1</button> <button type="button">2</button> <button type="button">3</button> <button type="button">4</button> <button type="button">5</button> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.js"></script>

Answer 2

检查 Div - q0 和 Div q4 的可见性。

if (!$("").css('visibility') === 'hidden') { }

根据返回值启用和禁用下一个和上一个按钮