Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Проблема с анимированием карусели рандомных картинок (https://javascript.ru/forum/misc/78791-problema-s-animirovaniem-karuseli-randomnykh-kartinok.html)

EvanBrown 05.11.2019 16:48

Проблема с анимированием карусели рандомных картинок
 
Здравствуйте, господа и дамы. Возникла проблема: при воспроизведении при нажатии на кнопку анимация подтормаживает (а именно прыгает к первой картинке и визуально начинает прокрутку с первой картинки). Также, чаще всего рандом выбирает только 1 картинку, некоторые и вовсе не выбирает (проверено в районе 100 кручений)
Буду очень рад Вашей помощи)

Вот собственно сам код:
<head>
...

<script>
 jQuery.easing['easeOutCirc'] = function (x, t, b, c, d) {
		return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
	}
$(function() {
    var option = {
        speed: 2,
        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 + 7 * (option.stopImageNumber + 6)
    }, {
        duration: option.duration * 1000,
        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);
        }
    });
  })
});
  </script>
</head>
<body>


<div class="roulette" style="overflow: hidden; height: 300px; width: 1000px;">
<div class="roulette-inner" style="position: relative; top: 24px; width: 10000px;">
<img src="images/1.png" style="display: block; float: left;">
<img src="images/2.png" style="display: block; float: left;">
<img src="images/3.png" style="display: block; float: left;">
<img src="images/4.png" style="display: block; float: left;">
<img src="images/5.png" style="display: block; float: left;">
<img src="images/6.png" style="display: block; float: left;">
<img src="images/7.png" style="display: block; float: left;">
<img src="images/8.png" style="display: block; float: left;">
<img src="images/9.png" style="display: block; float: left;">
</div>
</div>
</br>
<div class=button style="position: relative; height: 150px; wigth: 1000px;">
<button id="go" onclick="play()" class="btn btn-primary py-3 px-4">Lets Start</button>
</div>

...
</body>

рони 05.11.2019 17:28

Цитата:

Сообщение от EvanBrown
. Также, чаще всего рандом выбирает только 1 картинку, некоторые и вовсе не выбирает (проверено в районе 100 кручений)

строка 17
option.stopImageNumber = Math.random() * $(".roulette-inner img").length|0;


строка 31
$(".roulette-inner img").eq(option.stopImageNumber).addClass("active");

EvanBrown 05.11.2019 19:20

Цитата:

Сообщение от рони (Сообщение 514912)
строка 17
option.stopImageNumber = Math.random() * $(".roulette-inner img").length|0;


строка 31
$(".roulette-inner img").eq(option.stopImageNumber).addClass("active");

Можно чуть подробнее, если не сложно :)

рони 05.11.2019 19:42

EvanBrown,
заменить строки на предложенный код.

EvanBrown 05.11.2019 19:51

К сожалению, не помогло(

рони 05.11.2019 20:10

EvanBrown,
выпадает одно и тоже?

EvanBrown 05.11.2019 20:14

Цитата:

Сообщение от рони (Сообщение 514934)
EvanBrown,
выпадает одно и тоже?

Да

рони 05.11.2019 20:44

EvanBrown,
:-?
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .roulette-inner img.active{
       border: 5px solid #FF00FF;
       border-radius: 3px;
   }
   .roulette-inner{
       display: flex;
   }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
 jQuery.easing['easeOutCirc'] = function (x, t, b, c, d) {
        return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
    }
$(function() {
    var option = {
        speed: 2,
        duration: 3,
        stopImageNumber: 0
    };

 $("#go").click(function() {
 var len = $(".roulette-inner img").length;
 var width = $(".roulette-inner img:first").width();
 var widthTotall = len * width;
 $('#go').prop('disabled', true);
    option.stopImageNumber = Math.random() * len|0;
    $(".roulette-inner img").removeClass("active");
    $("#config").text(JSON.stringify(option));
    $({
        left: 0
    }).animate({
        left: widthTotall * option.speed
    }, {
        duration: option.duration * 1000,
        easing: "easeOutCirc",
        step: function(a) {
            $(".roulette-inner").css("transform", "translateX(-" + (a % widthTotall)+ "px)");
        },
        complete: function() {
            $(".roulette-inner img").eq(option.stopImageNumber).addClass("active");
            $('#go').prop('disabled', false);
        }
    });
  })
});
  </script>
</head>
<body>


<div class="roulette" style="overflow: hidden; height: 300px; width: 1000px;">
<div class="roulette-inner" style="position: relative; top: 24px; width: 10000px;">
    <img src="https://picsum.photos/100/100?1">
	<img src="https://picsum.photos/100/100?2">
	<img src="https://picsum.photos/100/100?3">
	<img src="https://picsum.photos/100/100?4">
	<img src="https://picsum.photos/100/100?5">
	<img src="https://picsum.photos/100/100?6">
	<img src="https://picsum.photos/100/100?7">
	<img src="https://picsum.photos/100/100?8">
	<img src="https://picsum.photos/100/100?9">

</div>
</div>
</br>
<div class=button style="position: relative; height: 150px; wigth: 1000px;">
<button id="go" class="btn btn-primary py-3 px-4">Lets Start</button>
</div>
<div id="config"></div>
</body>
</html>

EvanBrown 05.11.2019 20:51

У меня немножко другая система. Мне надо, чтобы рандомная картинка остановилась в центре

рони 05.11.2019 22:35

рулетка горизонтальная
 
Цитата:

Сообщение от EvanBrown
Мне надо, чтобы рандомная картинка остановилась в центре

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 <style type="text/css">body{
   position:relative;
 }

 .roulette-inner img{
   width:72px;
   height:72px;
   margin:2px;
   display: block;
   float: left;


 }

 .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);
 }

 .roulette {
  overflow: hidden; height: 126px; width: 532px;
 }

  .roulette-inner {
    position: relative; top: 24px; width: 17000px;
  }

 </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
 jQuery.easing['easeInOutQuart'] = function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
        return -c/2 * ((t-=2)*t*t*t - 2) + b;
    }
$(function() {
var k = 45, n = 7, w = 76;  //количество картинок , сколько показывать , ширина картинки
for (var i=0; i<k; i++)  {
$("<img>", {src : "https://dummyimage.com/72x72/d1e02d/03040d.jpg&text="+i}).appendTo(".roulette-inner")

}
for (var i=0; i<k; i++)  {
$("<img>", {src : "https://dummyimage.com/72x72/d1e02d/03040d.jpg&text="+i}).appendTo(".roulette-inner")

}
$(".roulette").width(n * w) ;
$(".roulette-inner").width(2 * k * w + w)

    var option = {
        speed: 5,
        duration: 3,
        stopImageNumber: 0
    };
 var old = 0;
 $("#go").click(function() {
    option.stopImageNumber = Math.random() * k|0;
    $(".roulette-inner  img").removeClass("active");
    $("#config").text(JSON.stringify(option));
    $({
        left: old * w
    }).animate({
        left: (k * w) * option.speed + w * (option.stopImageNumber + (k - Math.floor(n/2)))
    }, {
        duration: option.duration * 1000,
        easing: "easeInOutQuart",
        step: function(a) {
            $(".roulette-inner").css("transform", "translateX(-" + a % (k * w) + "px)");
        },
        complete: function() {
            old = option.stopImageNumber + (option.stopImageNumber < Math.floor(n/2)) * k
            $(".roulette-inner  img").eq(old).addClass("active");
            old = option.stopImageNumber + (k - Math.floor(n/2))
        }
    });
  })
});
  </script>
</head>

<body>
<h2>Config: <span id="config"></span></h2>
<div class="roulette">
<div class="roulette-inner">
</div>
</div>
<button id="go">Go</button>
</body>
</html>


Часовой пояс GMT +3, время: 06:48.