шансы в % JavaScript

Question

Всем привет! я столкнулся с проблемой в JavaScript я сделал горизонтальную рулетку, но не понимаю как настроить шансы, я хочу настроить свои шансы к каждому изображению в рулетке, подскажите пожалуйста возможно ли это реализовать?

 jQuery.easing['easeOutCirc'] = function (x, t, b, c, d) {
        return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
    }
$(function() {
  var option = {
      speed: 6,
      duration: 3,
      stopImageNumber: 4
  };
  $("#go").click(function() {
   $('#go').prop('disabled', true);
    option.stopImageNumber = Math.random() * 11|0;
    $(".roulette-inner  img").removeClass("active");
    $("#config").text(JSON.stringify(option));
    $({
        left: 0
    }).animate({
        left: 844 * option.speed + 75 * (option.stopImageNumber + 6)
    }, {
        duration: option.duration * 3000,
        easing: "easeOutCirc",
        step: function(a) {
            $(".roulette-inner").css("transform", "translateX(-" + a % 844 + "px)");
        },
        complete: function() {
          $(".roulette-inner  img").eq(option.stopImageNumber + (option.stopImageNumber < 6) * 11).addClass("active");
          $('#go').prop('disabled', false);
        }
    });
  })
});

body{
   position:relative;
 }

 .roulette-inner img{
   width:72px;
   height:72px;
   margin:2px;
 }

 .roulette-inner img.active{
   border:2px solid rgba(89,0,153,.2);
   box-sizing:border-box;
   border-radius:50%;
   padding:-4px 4px 2px 4px;
   transform:scale(1.7);
   z-index:1000;
   background-color:rgba(0,255,127,.5);

 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 <style type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<div class="roulette" style="overflow: hidden; height: 126px; width: 844px;">
<div class="roulette-inner" style="position: relative; top: 24px; width: 7000px;">
<img src="2.png" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
<img src="cs.jpg" style="display: block; float: left;">
</div>
</div>
<button id="go" onclick="play()">Открыть</button>
</body>
</html>

БЛОГ НА HUSL

шансы в % JavaScript

Ответы (0 шт):