禁用轮播 Prev Next 按钮

Question

您好，如果以下脚本分别显示第一个和最后一个 div，我需要禁用上一个和下一个锚点。这是它的fiddle。 我有几个锚点，单击时会显示相应的 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') { }

根据返回值启用和禁用next和prev按钮