Random/shuffle 跨多个滑块的图像显示

Question

我从图库中的一组图像中提取了 3 个滑块。

1) 我进行了设置，以便每个滑块都可以拉出所有没有重复的图像，并在它们之间旋转。图库中有 12 张图片，但可以将此数量减少到函数运行所需的最小数量。

2) 可以为每个滑块选择初始幻灯片图像。

3) 滑块都在一页上，显示在滑块上的图像不能重复。因此可以显示图片 6（在滑块 1 上）、图片 9（在滑块 2 上）、图片 10（在滑块 3 上），但不能显示图片 9、图片 1、图片 9。

4) 跨滑块的连续幻灯片组中不能有重复项。因此，如果滑块显示图像 4（滑块 1）、图像 2（滑块 2）、图像 9（滑块 3），那么下一组不应该有图像 3、图像 9、图像 6（因为 9 连续显示） .

5) 我的问题：我可以使用什么样的函数来解决这个问题？

我一直在尝试扩展我在 SO 上找到的一个函数，它可以防止元素重复，直到所有元素都显示出来：

*jQuery*
jQuery.fn.shuffle = function () {
    var j;
    for (var i = 0; i < this.length; i++) {
        j = Math.floor(Math.random() * this.length);
        $(this[i]).before($(this[j]));
    }
    return this;
};

我对每个滑块图像集都尝试了此功能，毫不奇怪这会导致更多重复，因为每个滑块的图像都是随机的，因此一起出现了多次。我试过在滑块之间随机化，但仍然没有骰子。下面是滑块的代码。

$( '.flexslider.first' ).shuffle(); // shuffled per slider

   // Flexsider initialization
    $( '.flexslider.first' ).flexslider();
    $( '.flexslider.second' ).flexslider();
    $( '.flexslider.third' ).flexslider();


*HTML*

    <div class="flexslider first">
      <ul class="slides">
        <li>
          <img src="slide5selected.jpg" />
        </li>
        <li>
          <img src="slide1.jpg" />
        </li>
        <li>
          <img src="slide2.jpg" />
        </li>
        <li>
          <img src="slide3.jpg" />
        </li>
        <li>
          <img src="slide4.jpg" />
        </li>
          <li>
          <img src="slide6.jpg" />
        </li>
        <li>
          <img src="slide7.jpg" />
        </li>
        <li>
          <img src="slide8.jpg" />
        </li>
        <li>
          <img src="slide9.jpg" />
        </li>
        <li>
          <img src="slide10.jpg" />
        </li>
        <li>
          <img src="slide11.jpg" />
        </li>
        <li>
          <img src="slide12.jpg" />
        </li>
      </ul>
    </div>

    <div class="flexslider second">
      <ul class="slides">
        <li>
          <img src="slide8selected.jpg" />
        </li>
        <li>
          <img src="slide1.jpg" />
        </li>
        <li>
          <img src="slide2.jpg" />
        </li>
        <li>
          <img src="slide3.jpg" />
        </li>
        <li>
          <img src="slide4.jpg" />
        </li>
        <li>
          <img src="slide5.jpg" />
        </li>
        <li>
          <img src="slide6.jpg" />
        </li>
        <li>
          <img src="slide7.jpg" />
        </li>
        <li>
          <img src="slide9.jpg" />
        </li>
        <li>
          <img src="slide10.jpg" />
        </li>
        <li>
          <img src="slide11.jpg" />
        </li>
        <li>
          <img src="slide12.jpg" />
        </li>
      </ul>
    </div>

    <div class="flexslider third">
      <ul class="slides">
        <li>
          <img src="slide3selected.jpg" />
        </li>
        <li>
          <img src="slide1.jpg" />
        </li>
        <li>
          <img src="slide2.jpg" />
        </li>
        <li>
          <img src="slide4.jpg" />
        </li>
         <li>
          <img src="slide5.jpg" />
        </li>
        <li>
          <img src="slide6.jpg" />
        </li>
        <li>
          <img src="slide7.jpg" />
        </li>
        <li>
          <img src="slide8.jpg" />
        </li>
         <li>
          <img src="slide9.jpg" />
        </li>
        <li>
          <img src="slide10.jpg" />
        </li>
        <li>
          <img src="slide11.jpg" />
        </li><li>
          <img src="slide12.jpg" />
        </li>
      </ul>
    </div>

对如何解决这个问题有什么想法吗？

Answer 1

您可以这样做（运行下面的代码片段并查看评论）：

请注意，我显示数字而不是图像是为了更好地说明算法。您必须根据您的实际代码对其进行调整。

// define an array with your images:
var imgs = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];

// define sliders:
var sliders = document.querySelectorAll('.slider');

// rotating sliders pick a random img from the array and push it into the current slider:
var c = 0;
while (imgs.length) {
  var n = Math.random() * imgs.length | 0;
  sliders[c++].innerHTML += `<i>${imgs.splice(n, 1)}</i>`;
  c *= c !== sliders.length;
}

.slider {
  width: 80vw;
  margin: 1rem auto;
  border: solid 1px #a40
}

i {
  display: inline-block;
  margin: .5rem
}

<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>

Random/shuffle 跨多个滑块的图像显示

Random/shuffle image display across multiple sliders

javascript

jquery

shuffle