jQuery Slider 空第二个循环

Question

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

我有两个问题。

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

这是更新后的小提琴 - 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;