禁用轮播 Prev Next 按钮

Posted 2023-02-25

【中文标题】禁用轮播 Prev Next 按钮

【英文标题】：Disable Carousel Prev Next buttons

【发布时间】：2014-01-12 17:17:03

【问题描述】：

您好，如果以下脚本分别显示第一个和最后一个 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>

【问题讨论】：

</br> 那个标签是什么？

@RokoC.Buljan 你在哪里看到换行标记？

对不起，我的错。 @ManofSnow 它在 jsFiddle 中。

谢谢我更新了；只是想知道为什么它仍然在那里工作。

【参考方案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>

【讨论】：

Gr8 在那里工作，但我无法在我的电脑上工作。我下载了 jquery2 仍然无法正常工作。我包含了 jquery2 然后添加了这段代码，但是当我用 chrome 打开本地文件时，我看到所有 5 个 div，

谢谢我可以让它工作，我在正文之前包含了代码并且它可以工作但是为什么当我将它添加到头部时它没有工作。我在 head 中尝试了 4 或 5 次，然后突然在 body 之前复制了它。

@swapna 那是因为我们应该总是将我们的 jQuery 代码包装在 ready function 中阅读：***.com/tags/jquery/info 编辑我的答案以反映。所以请记住，始终使用 document.ready

好的，但是在我的实际页面中，有五组锚显示或隐藏相同的 zdiv。即anchor id an0 to an9 show div id q0 to q9； an10 到 an15 显示 div id q10 到 q15... 等等；有没有一种方法可以根据锚点和 div id 显示或隐藏 div...或...以跨越网页中不同部分的锚点。谢谢。

否则只需将代码修改为，而不是.index()抓取点击的元素data-*属性

【参考方案2】：

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

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

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