Question

所以我想说我有五个div。我试图显示前3个div，然后显示一个新的div并在设定的时间间隔内移除div。

这是我的HTML代码：

<div class="speaker">One</div>
<div class="speaker">Two</div>
<div class="speaker">Three</div>
<div class="speaker">Four</div>
<div class="speaker">Five</div>

JS Demo在这里http://jsfiddle.net/mirzar/Sny3e/8/。

关于我在保持当前指数方面做错了什么的任何想法？一旦它显示了第五个发言者，我试图重复从“三四五”到“二三四”再到“一二三”，然后从头开始重新开始

Answer 1

我把你的小提琴分开，尽量不要修改。我设置了一个标志来检查我们向上或向下的方向。当我们回到索引时，我们检查是否再次返回0，如果是这样，我们将所有索引位置重置为默认值。

当你使用当前索引作为每次传球的条件时，最终会发生的事情是你在传球和失败之间来回摇摆。这就是为什么最好设置一个'flag'变量来指示应该运行哪一组语句。

var speakers = $(".speaker").length;
var currIndex = 0;
var endIndex = 0;
var reverseIndex = 0;
var up = true;

if (speakers > 3) {
   $(".speaker").hide();
   $('.speaker:lt(3)').show();
   var refreshId = setInterval(speaker_slides, 2000);
}

function speaker_slides() {

  if (up) {
    endIndex = currIndex + 3;
    $(".speaker").eq(currIndex).hide(500);
    $(".speaker").eq(endIndex).delay(500).show(500);
    currIndex++;
    $("#currIn").empty().append(currIndex);
    up = currIndex >= 2 ? false : true;
  } else {
    currIndex--;
    endIndex = currIndex;
    reverseIndex--;
    $(".speaker").eq(reverseIndex).hide(500);
    $(".speaker").eq(endIndex).delay(500).show(500);
    if(currIndex == 0) {
      up = true;
      endIndex = 0;
      reverseIndex = 0;
    }
  }

}

这可以清理一下，但我认为它正如你最初想要的那样工作。

希望有所帮助

http://jsfiddle.net/ZjcYd/

Answer 2

我分叉你的jsfiddle并尝试以我的方式修改：

http://jsfiddle.net/dharmavir/74KQc/

$(document).ready(function(){
  var slides = $(".speaker").length;
  $.each( $(".speaker"), function(index, node) {
    $(node).data("rank", index+1);
  });
  $(".speaker").hide();
  setInterval(slideRoller, 2000);
});

function slideRoller()
{
  rollSlides("container", "slides", "speaker", 1, 5, 3);
}

function rollSlides(containerDisplay, containerParent, elmSetClass, startIndex, endIndex, displayLimit)
{
  $("#"+containerDisplay).empty();
  $.each( $("."+elmSetClass), function() {
    var rank = $(this).data("rank");

    if( rank <= displayLimit )
    {
      $(this).clone().show().appendTo("#"+containerDisplay);
    }
    else
    {
      $(this).hide().appendTo("#"+containerParent);
    }
    if( rank <= startIndex )
    {
      rank = endIndex;
    }
    else 
    {
      rank = rank - 1;
    }
    $(this).data("rank", rank);
  });
}

Answer 3

我看到你有一个答案，但你可能对一个更通用，更紧凑的解决方案感兴趣：

  var $speakers = $(".speaker");
  var dims = {
    length: $speakers.length,
    batch: 3
  };
  var i = 0; //currIndex
  var dir = 1; //direction
  var offset = {};

  if (dims.length > dims.batch) {
    $speakers.hide();
    $('.speaker:lt(' + dims.batch + ')').show();
    var refreshId = setInterval(speaker_slides, 2000);
  }

  function speaker_slides() {
    i = i + dir;
    $("#currIn").text(i);
    offset.h = (dir == 1) ? -1 : dims.batch;
    offset.s = (dir == 1) ? dims.batch - 1 : 0;
    $speakers.eq(i + offset.h).hide(500);
    $speakers.eq(i + offset.s).delay(500).show(500);
    dir = (i <= 0) ? 1 : (i >= dims.length - dims.batch) ? -1 : dir;
  }

<强> DEMO

所有常量都来自dims.length和dims.batch。

对于不同的行为，只需将dims.batch更改为1,2或4。

如何在JQuery Counter中正确维护索引？

3 个答案: