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; // количество элементов
function LetsGo(){
    var x=[];
    for(var i in{xxx1:1,xxx2:1,xxx3:1}){
        x.push({
            a:document.getElementById(i), // this - это HTML контрол с классом XXX
            speed:30+Math.floor(Math.random()*20), // скорость
            scr:Math.floor(Math.random()*oneHeight*numImage) // начальное положение
        });
    }
    var interval=setInterval(
        function (){
            var i = x.length,complete=true;
            while(i--){ var a=x[i];
                a.scr+=a.speed;
                if(a.speed>0){ a.speed-=0.2;complete=false;}
                if(a.scr>(oneHeight*numImage))a.scr-=oneHeight*numImage;
                a.a.scrollTop=Math.floor(a.scr);
            }
            if(complete) clearInterval(interval)
        },20)
}