Well, it's the following I have the following code:
<!DOCTYPE html>
<html lang="PT-BR">
<head>
<title></title>
<script src="https://captainskin.com/assets/js/lib.js"></script><style>#spin{position:relative;width:1024px;height:85px;border:1pxsolid#ccc;z-index:999;}#items{position:relative;overflow:hidden;max-width:1015px;height:80px;}.img{border:1pxsolid#ccc;background:url(caixa.png);float:left;width:120px;height:96px;}.rol{overflow:auto;width:22295px;display:flex;align-itemsmin-width:1000%;}.ponto{width:2px;background-color:#CC2525;position:absolute;top:-15px;bottom:-10px;left:50%;margin-left:-1px;z-index:1;}</style><script>functionrun(off){$(".rol").css("margin-left", "0px");
$(".rol").animate({
"margin-left": off*4
},{
duration: 8e3,
easing: "easeOutQuad",
complete: function() {
}
});
};
</script>
</head>
<body>
<center>
<div id="spin">
<span class="ponto"></span>
<div id="items">
<div class="rol">
<div class="sub">
<div class="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/1104779481.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/310778737.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/1812816683.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/360463485.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/1104779481.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/310778737.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/1812816683.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/360463485.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/1104779481.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/310778737.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/1812816683.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/360463485.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/1104779481.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/310778737.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/1812816683.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/360463485.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/1104779481.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/310778737.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/1812816683.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/360463485.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/1104779481.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/310778737.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/1812816683.png"></div><divclass="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/360463485.png"></div><divclass="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<!-- 1 -->
<div class="img"><img src="https://s3.eu-central-1.amazonaws.com/drakemoon-skins/1104779481.png"></div><divclass="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<!-- 2 -->
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<!-- 3 -->
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<!-- 4 -->
</div>
</div>
</div>
</div>
<br>
<br>
<button onclick="taok()">Rodar!</button>
<script type="text/javascript">
function taok(){
var ok = Math.floor(Math.random() * -1490) + -1580
run(ok);
}
</script>
</body>
</html>
When I click rotate, the roulette wheel has an effect where it falls into one of the items randomly. What he intended to do was that when he clicked on the wheel, he was not allowed to click again while it was taking effect, and if the person clicked, nothing happened. In a way I wanted to block the button while rolling and blocking the js somehow, so that it had no influence on the effect. Once the effect was over, it was back to normal.
How can I do this?