javascript - jQuery Slider 空第二个循环

Question

我正在实现一个带有导航控件的简单图像 slider 。

不过我有两个问题。

1. 有四张幻灯片，代码为每张幻灯片创建四个控件，它循环播放幻灯片，但是在 4 张幻灯片之后它再次循环而不遍历幻灯片。
2. 我无法单击单个按钮将我定向到幻灯片...

有人可以帮助兄弟吗？

function createNav() {
  var numofslides = sel.children().length;
  console.log(numofslides);

  //alert(countChildren);
  for (var i = 0; i < numofslides; i++) {
    $('ul').append('<li class="circle"></li>');
  }  
}

//Slide function......//
window.time = function() {
  now = setInterval(function() {
    sel.children().eq(0).fadeOut().next().fadeIn().end().appendTo(sel);
    el.children().eq(count).addClass('active').siblings().removeClass('active');
    if (count == el.children().length) {
      el.children().eq(0).addClass('active').siblings().removeClass('active');
      count = 0;
    }
    count++
    //console.log(count);
  }, 2000);

};

https://jsfiddle.net/6qqc9ohf/

Answer 1

这是更新的 fiddle - https://jsfiddle.net/6qqc9ohf/6/

我已修复以下问题:

1. 创建导航时，您将附加 li的 ul的。所以改变

   $('ul').append('<li class="circle"></li>');

   到

   $('#container').append('<li class="circle"></li>');

1. 创建导航时，创建第一个 li作为active .将以下代码添加到 createNav() .

   $('#container li:eq(0)').addClass('active');

1. 将计数更改为 1。var count = 1;