0

У меня есть готовая рулетка, она крутится и при остановке на элементе его рамки горят зелёным. Мне надо узнать, что это за элемент.

<div class="wraper">
  <div class="arrowup"></div>
  <div class="arrowdown"></div>
  <div class="window">
    <ul class="list">

    </ul>
    <ul class="list">
      <li><img src="https://cdn0.iconfinder.com/data/icons/fruits/128/Strawberry.png" alt="1" id='a1'></li>
      <li><img src="https://cdn0.iconfinder.com/data/icons/fruits/128/Cherry.png" alt="2" id='a2'></li>
      <li><img src="https://cdn0.iconfinder.com/data/icons/fruits/128/Apple.png" alt="3" id='a3'></li>
      <li><img src="https://cdn0.iconfinder.com/data/icons/fruits/128/Lemon.png" alt="4" id='a4'></li>
      <li><img src="https://cdn0.iconfinder.com/data/icons/fruits/128/Kiwi.png" alt="5" id='a5'></li>
      <li><img src="https://cdn0.iconfinder.com/data/icons/fruits/128/Pear.png" alt="6" id='a6'></li>
    </ul>
  </div>
</div>
<p style="text-align: center">
  <button class="button">Кнопка</button>
  <div class="win">
    <ul>

    </ul>
  </div>
  <script>
    $(document).ready(function() {
      for (i = 0; i < 3; i++) {
        $(".list li").clone().appendTo(".list");
      }
      $('.button').click(function() {
        $('.window').css({
          right: "0"
        })
        $('.list li').css({
          border: '4px solid transparent'
        })

        function selfRandom(min, max) {
          return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var x = selfRandom(50, 100);
        console.log('вам выпало ' + x)
        $('.window').animate({
          right: ((x * 130) + (x * 8 - 12) - 119)
        }, 10000);
        setTimeout(() => {
          console.log(x)
          $('.list li:eq(' + x + ')')
          $('.list li:eq(' + x + ')').css({
            border: '4px solid #00ba00'



          })
        }, 10500);
      });
    });
  </script>

Результат

3
  • Я ничего не понял 28 дек 2021 в 12:34
  • selfRandom(50, 100); - даёт значение от 50 до 100... где в коде такие значения? 28 дек 2021 в 12:35
  • selfRandom(50, 100); храниться в переменной x , она нужна что бы рулетка прокручивалась рандомно px . А не все время например по 100px в лево
    – Venom
    28 дек 2021 в 12:48

1 ответ 1

0

Подход в целом неверный. Надо не от сгенерированных пикселей отталкиваться и искать, что это за картинка, а сделать так:

  1. в data атрибут картинок вписать числа 1,2,3, и т.д. В общем пронумеровать.
  2. Создать массив с числами от 1 до количества кортинок (например 5)
  3. Сделать рандом именно на числа из массива
  4. Соотнести число из массива и картинку...и только тогда эту картинку отображать и выделять.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.