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

Question

我有点复杂的东西.我有五个li和一个类"活跃".

只有一个李的班级"活跃".那个会有红色.

当我点击"下一步"链接时,"活动"类将被添加到下一个li.

当我点击"Prev"链接时,"active"类将被添加到前一个li中.

当我点击li时,"active"类将仅添加到单击的li中.

那些认为有效,但loop()函数存在问题.

我需要"主动"类自动从一个li移动到下一个.它有效,但当我点击下一个链接,prev-link或li时,事情就变得疯狂了.

所有这3个元素:循环,next-prev链接和点击li应该完美地结合在一起.

如果我单击下一个链接,并且类"active"从第二个li转移到第三个li,我需要"for"语句从第三个li继续移动类并继续循环.

我可以尝试从for nr-1(被点击的li)中获取"i"而不是0,因为(var i = nr-1; i <functions.length; i ++),但是在第一个循环之后类"活跃"它应该从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在这里

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>