onclick 更改之前的滑块当前/总数

Question

它是foundation zurb 6/orbit slider。

如何在slidechange.zf.orbit 事件之前显示计数当前/总数？我应该在窗口加载或其他什么之前添加一些事件吗？

第一个幻灯片没有计数器，只有当点击它可见。

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
  <ul class="orbit-container">
    <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><li></li></button>
    <button class="orbit-next"><span class="show-for-sr">Next Slide</span><li></li></button>
    <li class="is-active orbit-slide">
      <img class="orbit-image" src="../images/demo-img/screen-shot.png" alt="">
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="../images/demo-img/screen-shot.png" alt="">
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="../images/demo-img/screen-shot.png" alt="">
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="../images/demo-img/event-demo.png" alt="">
    </li>
  </ul>
  <nav class="orbit-bullets">
    <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
    <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
    <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
  </nav>
  <div class="slider-number"></div>
</div>

<script>
(function() {
  function slideNumber() {
    var totalItems = $('li.orbit-slide').length;
    var currentItem = $('li.orbit-slide.is-active').index() - 1;
    $('.slider-number').html(currentItem + '/' + totalItems);
  }
  document.addEventListener("DOMContentLoaded", function() {
    $('[data-orbit]').on('slidechange.zf.orbit', slideNumber);
  });
})();
</script>

Answer 1

1. The DOMContentLoaded event 只是您正在寻找的事件。

当初始 HTML 文档完全加载和解析时触发 DOMContentLoaded 事件，无需等待样式表、图像和子框架完成加载。

所以在这个事件中再调用一次slideNumber()函数：

<script>
    document.addEventListener("DOMContentLoaded", function() {
        function slideNumber() {
          var totalItems = $('li.orbit-slide').length;
          var currentItem = $('li.orbit-slide.is-active').index() - 1;
          $('.slider-number').html(currentItem + '/' + totalItems);
        }
        slideNumber();
        $('[data-orbit]').on('slidechange.zf.orbit', slideNumber);
    });
</script>

1. Foundation 使用 jQuery。所以你可以使用the .ready() method 而不是document.addEventListener("DOMContentLoaded" ...。看起来像$(function() {。

2. 不要强制函数在每个新调用中定义 totalItems 和 $('.slider-number')。请改用全局变量。

<script>
    $(function() {
        var totalItems = $('li.orbit-slide').length;
        var selectNumber = $('.slider-number');
        
        slideNumber();
        $('[data-orbit]').on('slidechange.zf.orbit', slideNumber);
        
        function slideNumber() {
            var currentItem = $('li.orbit-slide.is-active').index() - 1;
            sliderNumber.html(currentItem + '/' + totalItems);
        };
    });
</script>

请查看结果：http://codepen.io/glebkema/pen/XjrLZj

$(document).foundation();  // initialize every Foundation plugin

var totalItems = $('li.orbit-slide').length;
var selectNumber = $('.slider-number');

slideNumber();
$('.orbit').on('slidechange.zf.orbit', slideNumber);

function slideNumber() {
  var currentItem = $('li.orbit-slide.is-active').index() - 1;
  selectNumber.text(currentItem + '/' + totalItems);
}

.slider-number {
  font-size: 36px;
  text-align: center;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css">

<div class="orbit" role="region" data-orbit data-timer-delay="3000" data-use-m-u-i="false">
  <ul class="orbit-container">
    <button class="orbit-previous">&#9664;&#xFE0E;</button>
    <button class="orbit-next">&#9654;&#xFE0E;</button>
    <li class="orbit-slide is-active">
      <img class="orbit-image" src="https://via.placeholder.com/900x300/c69/f9c/?text=1" alt="">
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="https://via.placeholder.com/900x300/9c6/cf9/?text=2" alt="">
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="https://via.placeholder.com/900x300/69c/9cf/?text=3" alt="">
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="https://via.placeholder.com/900x300/96c/c9f/?text=4" alt="">
    </li>
  </ul>
  <nav class="orbit-bullets">
    <button data-slide="0" class="is-active"></button>
    <button data-slide="1"></button>
    <button data-slide="2"></button>
    <button data-slide="3"></button>
  </nav>
  <div class="slider-number"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js"></script>