Question

如何在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

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>

Foundation使用jQuery。因此，您可以使用the .ready() method代替document.addEventListener("DOMContentLoaded" ...。它看起来像$(function() {。
不要强制函数在每次新调用时定义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="//placehold.it/900x300/c69/f9c/?text=1" alt="">
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="//placehold.it/900x300/9c6/cf9/?text=2" alt="">
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="//placehold.it/900x300/69c/9cf/?text=3" alt="">
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="//placehold.it/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>

onclick更改前的滑块电流/总数

1 个答案: