滑动多个元素块，推进整个块(jQuery)

Question

我有一个任意数量的元素，我想通过。我创建了一个小提琴来向您展示我的尝试。

$(document).ready(function() {
var events = 13;
var num = 1;

for(var i = 1; i <= events; i++) {
  $('<div class="anyEventDiv" id="anyDiv' + i + '">'
    + '<div class="check"><span>N' + i + '</span></div></div>').appendTo(".container");
}

if(events > 6) {
  $('<div class="sliderLeft">left</div>').prependTo(".container");
  $('<div class="sliderRight">right</div>').appendTo(".container");

  for(var y = 7; y <= events; y++) {
    $("#anyDiv" + y).css("display", "none");
  }
}

$(".sliderRight").on('click', function() {
  if(num <= (events - 6)) {
    $("#anyDiv" + (6 + num)).css("display", "table-cell");
    $("#anyDiv" + num).css("display", "none");

    num++;
  }
});

$(".sliderLeft").on('click', function() {
  if(num > 1) {
    $("#anyDiv" + (6 + num - 1)).css("display", "none");
    $("#anyDiv" + (num - 1)).css("display", "table-cell");

    num--;
  }
});
});

我想我的滑块被激活时，有超过6个事件发生。这就是为什么我只在计数大于6时才添加箭头的原因。在示例中，我将事件数设置为可以更改的变量，以便更容易地维护流。

现在，我成功地做到了，一次滑动一个事件，或者向右，或者向左。这很简单。当我想通过点击右边的按钮来显示一个包含6个元素的新块时，就变得很棘手了。我的事件总数并不总是6的倍数，例如，它可能是13。在这种情况下，我必须显示除法的其余部分，并滑动最后一个小于6的元素，因为我的总数不会是6的倍数。左箭头还应该一次返回6个元素的块。

我知道Bootstrap的旋转木马也有类似的功能，但不幸的是，它不能以类似的方式工作，我最终会编写自己的解决方案来解决这个问题。

顺便提一句，我很好奇这个手工制作的、无框架的解决方案是否可以像Bootstrap的旋转木马一样被动画化。

提前感谢您的帮助！

Answer 1

嗯，我经常玩这个场景。我不知道答案是否会对任何人感兴趣，尽管如此，还是有一个人对此感兴趣。下面是我对jQuery (小提琴)所做的工作：

$(document).ready(function() {
var events = 13;
var num = 0;
var rem = events % 6;

for(var i = 1; i <= events; i++) {
  $('<div class="anyEventDiv" id="anyDiv' + i + '">'
    + '<div class="check"><span>N' + i + '</span></div></div>').appendTo(".container");
}

if(events > 6) {
  $('<div class="sliderLeft">left</div>').prependTo(".container");
  $('<div class="sliderRight">right</div>').appendTo(".container");

  for(var y = 7; y <= events; y++) {
    $("#anyDiv" + y).css("display", "none");
  }
}

$(".sliderRight").on('click', function() {
  if(events - 6 - num >= 6) {
    for(var k = 1; k <= 6; k++) {
      $("#anyDiv" + (6 + num + k)).css("display", "table-cell");
      $("#anyDiv" + (num + k)).css("display", "none");
    }

    num = num + 6;
  }
  else {
    for(var k = 1; k <= rem; k++) {
      $("#anyDiv" + (6 + num + k)).css("display", "table-cell");
      $("#anyDiv" + (num + k)).css("display", "none");
    }
  }
});

$(".sliderLeft").on('click', function() {
  if(num > 1) {
    for(var k = 0; k <= 5; k++) {
      $("#anyDiv" + (6 + num + rem - k)).css("display", "none");
      $("#anyDiv" + (num + rem - k)).css("display", "table-cell");
    }

    num = num - 6;
  }
  else {
    for(var k = 1; k <= rem; k++) {
      $("#anyDiv" + (k + 6)).css("display", "none");
      $("#anyDiv" + k).css("display", "table-cell");
    }
  }
});
});

不过，我一直没能把整件事动画化。我欢迎你提出建议。至少这个jQuery片段通过编程实现了我想要的结果。