Случайное / случайное отображение изображения на нескольких ползунках - PullRequest
Новая
       10

Случайное / случайное отображение изображения на нескольких ползунках

0 голосов
/ 25 августа 2018

У меня есть 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>

Есть мысли о том, как к этому подойти?

1 Ответ

0 голосов
/ 25 августа 2018

Вы можете сделать это следующим образом (запустите фрагмент ниже и посмотрите комментарии):

Обратите внимание, что я показываю цифры вместо изображений, чтобы лучше проиллюстрировать алгоритм. Вам нужно будет адаптировать его к вашему фактическому коду. 

// 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>
...