javascript - 如何在for语句中， "i"从一个值开始，直到循环结束，第二个循环从1开始

Question

我有一些更复杂的东西。我有五里和一个类(class)“活跃”。

只有 li 的一个具有“active”类。那个颜色是红色的。

当我单击“Next”链接时，“active”类将添加到下一个 li。

当我单击“Prev”链接时，“active”类将添加到上一个 li。

当我点击一个 li 时，类“​​active”将只添加到被点击的 li。

那些认为可行，但 loop() 函数存在问题。

我需要“active”类自动从一里移动到另一里。它有效，但当我单击下一个链接、上一个链接或一个 li 时，事情变得疯狂。

所有这 3 个元素:循环、下一个-上一个链接和点击一个 li 应该完美地结合在一起。

如果我单击下一个链接，类“active”从第二里转移到第三里，我需要“for”语句从第三里继续移动类并继续循环。

我可以尝试从 nr-1(点击的 li)中获取 for 中的“i”，而不是从 0，for(var i=nr-1; i < functions.length; i++)，而是在之后类“active”的第一个循环它应该再次从0开始，但它从nr-1开始，这是正常的。

循环有效，当我点击 li 或 prev-next 链接时出现问题。

$(document).ready(function () {

  var f1 = function () {
    $(".1").addClass("active").siblings("li").removeClass("active")
  };
  f2 = function () {
    $(".2").addClass("active").siblings("li").removeClass("active")
  };
  f3 = function () {
    $(".3").addClass("active").siblings("li").removeClass("active")
  };
  f4 = function () {
    $(".4").addClass("active").siblings("li").removeClass("active")
  };
  f5 = function () {
    $(".5").addClass("active").siblings("li").removeClass("active")
  };

  var functions = [f1, f2, f3, f4, f5];
  var y = functions.length;

  var loop = function () {
    for (var i = 0; i < functions.length; i++) {
      (function (i) {
        setTimeout(function () {
          functions[i]();
        }, 1000 * i);
      })(i);
    }
    setTimeout(loop, (1000 * (functions.length)));
  }
  
  loop();

  $("ol li ").click(function () {
    var nr = $(this).data("number");
    functions[nr - 1]();
  });


  $(".flex-next").click(function () {
    var nr = $("ol").find("li.active").data("number");

    if (nr == y) {
      functions[0]();
    } else {
      functions[nr]();
    }

  });


  $(".flex-prev").click(function () {
    var nr = $("ol").find("li.active").data("number");
    //y = functions.length;
    if (nr == 1) {
      functions[y - 1]();
    } else {
      functions[nr - 2]();
    }

  });

});

@import url(http://reset5.googlecode.com/hg/reset.min.css);
ol li {
  width:50px;
  height:50px;
  background-color:blue;
  float:left;
  margin:10px;
}
ul li a {
  text-decoration: none;
  width:100px;
}
.active {
  background-color:red;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol>
  <li data-number="1" class="1 active ">
    <a href="#"></a>	
  </li>
  <li data-number="2" class="2">
    <a href="#"></a> 
  </li>
  <li data-number="3" class="3">
    <a href="#"></a> 
  </li>
  <li data-number="4" class="4">
    <a href="#"></a> 
  </li>
  <li data-number="5" class="5">
    <a href="#"></a> 
  </li>
</ol>
<ul class="flex-direction-nav">
  <li>
    <a class="flex-prev" href="javascript:void(0);">Previous</a>
  </li>
  <li>
    <a class="flex-next" href="javascript:void(0);">Next</a>
  </li>
</ul>

jsfiddle here

Answer 1

稍微修改了你的loop()。

$(document).ready(function () {

  var f1 = function () {
    $(".1").addClass("active").siblings("li").removeClass("active")
  };
  f2 = function () {
    $(".2").addClass("active").siblings("li").removeClass("active")
  };
  f3 = function () {
    $(".3").addClass("active").siblings("li").removeClass("active")
  };
  f4 = function () {
    $(".4").addClass("active").siblings("li").removeClass("active")
  };
  f5 = function () {
    $(".5").addClass("active").siblings("li").removeClass("active")
  };

  var functions = [f1, f2, f3, f4, f5];
  var y = functions.length;
  var myInterval = null;
  var loop = function (goToFirst) {
    if(goToFirst == true)
      f1();
    myInterval = setInterval(function(){
      $(".flex-next").click();
    },1000);
  }
  
  loop(true);

  $("ol li ").click(function () {
    var nr = $(this).data("number");
    functions[nr - 1]();
  });


  $(".flex-next").click(function () {
    var nr = $("ol").find("li.active").data("number");
    clearInterval(myInterval);
    if (nr == y) {
      functions[0]();
    } else {
      functions[nr]();
    }
    loop(false);
  });


  $(".flex-prev").click(function () {
    var nr = $("ol").find("li.active").data("number");
    clearInterval(myInterval);
    if (nr == 1) {
      functions[y - 1]();
    } else {
      functions[nr - 2]();
    }
    loop(false);
  });

});

@import url(http://reset5.googlecode.com/hg/reset.min.css);
ol li {
  width:50px;
  height:50px;
  background-color:blue;
  float:left;
  margin:10px;
}
ul li a {
  text-decoration: none;
  width:100px;
}
.active {
  background-color:red;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol>
  <li data-number="1" class="1 active ">
    <a href="#"></a>	
  </li>
  <li data-number="2" class="2">
    <a href="#"></a> 
  </li>
  <li data-number="3" class="3">
    <a href="#"></a> 
  </li>
  <li data-number="4" class="4">
    <a href="#"></a> 
  </li>
  <li data-number="5" class="5">
    <a href="#"></a> 
  </li>
</ol>
<ul class="flex-direction-nav">
  <li>
    <a class="flex-prev" href="javascript:void(0);">Previous</a>
  </li>
  <li>
    <a class="flex-next" href="javascript:void(0);">Next</a>
  </li>
</ul>