228,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
li{
margin: 0px;
width: 60px; height:50px;
display: block;
text-align: center;
color: rgba(255, 255, 255, 1);
font-size: 24px;
font-weight: bold;
}
#carusel {
position:relative; top: 0px; left:0px; display:block;
width: 60px; height:0px;
padding: 0px; margin: 0px;
}
div{
overflow:hidden; width: 60px; height:50px; position: relative; left: 100px
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function () {
var arr = [1,4,90,56,3,400,800,67,7,34,12345], carusel = $('#carusel');
function rand(min, max, integer) {
var r = Math.random() * (max - min) + min;
return integer ? r|0 : r;
}
function rgbColor() {
return 'rgb(' + rand(0 ,256, true) + ', ' + rand(0 ,256, true) + ', ' + rand(0 ,256, true) + ')';
}
$.each(arr,function(indx, el){
$('<li/>',{text : el, data : {i : indx},css : {'background-color' : rgbColor()}}).appendTo(carusel)
carusel.height('+=50')
});
function lotto()
{
var n = rand(0 ,arr.length, true);
r = rand(2 ,5, true);
$('p').text(arr[n]);
carusel.stop();
(function go() {
carusel.animate({
top: '-=50'
}, 200, function () {
var li = $('li:first');
data = li.next().data('i');
if (data == n) r--;
li.appendTo(carusel)
carusel.css({
top: '0px'
});
r && go()
})
}())
}
$('[type="button"]').on({click : lotto})
})
</script>
</head>
<body>
<div>
<ul id="carusel">
</ul>
</div>
<p></p>
<input name="" type="button" value="go">
</body>
</html>