<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex">
<title> - jsFiddle demo</title>
<script src='http://code.jquery.com/jquery-1.11.0.js'></script>
<style type='text/css'>
li{
margin: 0px;
width: 60px; height:50px;
display: inline-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:70px;
padding: 0px; margin: 0px;
}
.divv{
overflow:hidden; width: 540px; height:50px; position: relative; left: 100px
}
#carusel li{
border-radius: 50%;
line-height: 50px;
}
</style>
</head>
<body>
<div class="divv">
<ul id="carusel">
</ul>
</div>
<p></p>
<input name="" type="button" value="go">
<script>
$(function () {
function random(min,max,l)
{var arr = [],m = [],n = 0;
if (max - min < l-1) return;
for (var i=0; i<=(max-min); i++)m[i] = i + min;
for (var i=0; i<l; i++) {n = Math.floor(Math.random()*(m.length)); arr[i]=m.splice(n,1)[0];};
return arr
}
var arr = random(0,36,37), carusel = $('#carusel');
function rand(min, max, integer) {
var r = Math.random() * (max - min) + min;
return integer ? r|0 : r;
}
$.each(arr,function(indx, el){
$('<li/>',{text : el, data : {i : el},css : {'background-color' : el ? el%2 ? 'red' : 'black' : 'green'},color : el ? 'white' : 'black'}).appendTo(carusel)
carusel.width('+=60')
});
function lotto()
{
var n = rand(0 ,arr.length, true);
r = rand(2 ,5, true);
carusel.stop();
(function go() {
carusel.animate({
left: '-=50'
}, 100, function () {
var li = $('li:first');
data = $('#carusel>li:eq(5)').data('i');
if (data == n) r--;
li.appendTo(carusel)
carusel.css({
left: '0px'
});
r && go();
if(!r) {$('#carusel>li:eq(4)').css({"border":"#86B817 3px solid"});
}
})
}())
}
$('[type="button"]').on({click : lotto})
})
</script>
</body>
</html>
|