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>

跨多个滑块随机显示/随机播放图像

1 个答案: