JS Slot machine example

by NOVUSIDEA

HTML

<script src="http://kirkjerk.com/m/files/jquery.easing.1.3.js"></script>
<div id="slots_container">
    <div class="slots" id="slots_a">
        <div class="wrapper" ></div>
    </div>
    <div class="slots" id="slots_b">
        <div class="wrapper" ></div>
    </div>
    <div class="slots" id="slots_c">
        <div class="wrapper" ></div>
    </div>
    <div style="text-align:center">
        <input type="button" value="spin!" id="go" style="margin-top:4px;">
    </div>
</div>

CSS

#slots_container {
  background-color:white;
  padding:0px;
  margin:0px;
  width:310px
}
.slots {
  font-size:100px;
  font-family:arial,helvetica,sans-serif;
  overflow:hidden;
  width:100px;
  height:100px;
  border:1px solid black;
  float:left;
}
.slots .wrapper{
  margin-top:-6px;
  width:100px;
}
.slots .slot{
  width:100px;
  height:100px;
  text-align:center;

}

.slots .slot img {
  max-width: 100%;
  height: auto;
}

JavaScript

/**
 *    Slot machine example
 *    credit: http://kirkjerk.com/m/files/kirkdev/slots/
 */

// options for slots
var opts = ['A','B','C','D','F'];
var opts_img = [
  'https://via.placeholder.com/140/09f/fff',
  'https://via.placeholder.com/140/ef5/333',
  'https://via.placeholder.com/140/3a8/fff',
  'https://via.placeholder.com/140/33f/fff',
  'https://via.placeholder.com/140/f33/fff'
];

$(document).ready(function(){
    addSlots($("#slots_a .wrapper"));
	addSlots($("#slots_b .wrapper"));
	addSlots($("#slots_c .wrapper"));
});

$('#go').click(function(){
	addSlots($("#slots_a .wrapper"));
	moveSlots($("#slots_a .wrapper"));
	addSlots($("#slots_b .wrapper"));
	moveSlots($("#slots_b .wrapper"));
	addSlots($("#slots_c .wrapper"));
	moveSlots($("#slots_c .wrapper"));
});

function addSlots(jqo){
	for(var i = 0; i < 15; i++){
		var ctr = Math.floor(Math.random()*opts.length);
		//jqo.append("<div class='slot'>"+opts[ctr]+"</div>");
        // use this one to add images instead of text
        jqo.append("<div class='slot'><img src='"+opts_img[ctr]+"' style='max-width:140px; '></div>");
	}
}

function moveSlots(jqo){
    var time = 6500;
    time += Math.round(Math.random()*1000);
    jqo.stop(true,true);
    var marginTop = parseInt(jqo.css("margin-top"), 10)
    marginTop -= (7 * 100)
    jqo.animate(
        {"margin-top":marginTop+"px"},
        {'duration' : time, 'easing' : "easeOutElastic"});
}