JSFiddle - React, Tailwind, and code Playground

by djmartini

HTML

<div id='xxx1' class='XXX'>
<div class='X'>1</div> <!-- а вот тут - 10 картинок -->
<div class='X'>2</div>
<div class='X'>3</div>
<div class='X'>4</div>
<div class='X'>5</div>
<div class='X'>6</div>
<div class='X'>7</div>
<div class='X'>8</div>
<div class='X'>9</div>
<div class='X'>10</div>
<div class='X'>1</div> <!-- и еще одна, такая-же как первая -->
</div>
<div id='xxx2' class='XXX'>
<div class='X'>1</div> <!-- и вот тут - 10 картинок -->
<div class='X'>2</div>
<div class='X'>3</div>
<div class='X'>4</div>
<div class='X'>5</div>
<div class='X'>6</div>
<div class='X'>7</div>
<div class='X'>8</div>
<div class='X'>9</div>
<div class='X'>10</div>
<div class='X'>1</div> <!-- и еще одна, такая-же как первая -->
</div>
<div id='xxx3' class='XXX'>
<div class='X'>1</div> <!-- и вот тут - 10 картинок -->
<div class='X'>2</div>
<div class='X'>3</div>
<div class='X'>4</div>
<div class='X'>5</div>
<div class='X'>6</div>
<div class='X'>7</div>
<div class='X'>8</div>
<div class='X'>9</div>
<div class='X'>10</div>
<div class='X'>1</div> <!-- и еще одна, такая-же как первая -->
</div>
<input type='button' onclick='LetsGo()' value='!!!Исчо!!!'>

CSS

.XXX {width: 70px; height: 100px; border: 1px solid red; overflow:hidden;float:left}
  .X {font-size:70px;width:100%;text-align:center; height:80px;}/* << вот тут 80!!!*/

JavaScript

var oneHeight=80, // размер одного элемента
    numImage=10, // количество элементов
    speedStep=0.2; // скорость изменения скорости
function LetsGo(){
    clearInterval(LetsGo.interval);
    var x=[];
    for(var i in{xxx1:1,xxx2:1,xxx3:1}){
        var ob=5+Math.floor(Math.random()*6), // количество оборотов 5 минимум, 10 - максимум
            num=Math.floor(Math.random()*numImage), // выигравший нумер
            o={
                ob:ob,num:num,
            a:document.getElementById(i), // это наш контрол с классом XXX
            // время=(speedStart)/speedStep
            // расстояние=(speedStart/2)*время -арифм прогр
            // расстояние=speedStart^2/(2*speedStep)
            // speedStart=sqrt(расстояние*2*speedStep)
            speed:Math.sqrt(((ob*numImage+num)* oneHeight)* speedStep*2), // скорость
            scr:-26 // магия, блин 
        }; // выигравший номер
        x.push(o);
    }
    LetsGo.interval=setInterval(
        function (){
            var i = x.length,complete=true;
            while(i--){ 
                var a=x[i];
                a.scr+=a.speed;
                if(a.speed>2*speedStep){ 
                    a.speed-=speedStep;complete=false;
                } else if(a.speed>0) { 
                    var t= Math.round(a.scr / oneHeight);
                    if(t>=numImage) t=0;
                    console.log(i,t,a.scr-oneHeight*t,a.ob,a.num);
                    a.scr=oneHeight*t;
                    a.speed=0;
                    complete=false;
                }
                if(a.scr>(oneHeight*numImage))
                    a.scr-=oneHeight*numImage;
                a.a.scrollTop=Math.floor(a.scr);
            }
            if(complete) clearInterval(LetsGo.interval)
        },20)
}