0

假设我有五个 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 演示在这里http://jsfiddle.net/mirzar/Sny3e/8/。

关于我在不保留当前索引方面做错了什么的任何想法？一旦它显示了第五个扬声器，我正在尝试迭代从“三四五”到“二三​​四”，然后是“一二三”，然后从头开始

4

3 回答 3

2

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

当您使用当前索引作为每次通过的条件时，最终发生的事情是您到达了一个点，它在通过和失败之间来回摇摆。这就是为什么最好设置一个“标志”变量来指示应该运行哪组语句。

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/

于 2013-01-08T05:24:58.877 回答
1

我分叉了你的 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);
  });
}
于 2013-01-08T05:48:47.533 回答
0

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

  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;
  }

演示

所有的常数都派生自dims.length和dims.batch。

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

于 2013-01-08T06:53:46.530 回答