jQuery 滑块空第二个循环

Question

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

不过我有两个问题。

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

谁能帮帮兄弟。

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/

我已修复以下问题：

创建导航时，您正在将 li 附加到两个 ul。所以改变

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

到

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

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

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

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

jQuery 滑块空第二个循环

jQuery Slider empty second loop

javascript

css

jquery

slider