<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">body{
position:relative;
}
.roulette-inner img{
width:72px;
height:72px;
margin:2px;
display: block;
float: left;
}
.roulette-inner img.active{
border:2px solid rgba(89,0,153,.2);
box-sizing:border-box;
border-radius:50%;
padding:-4px 4px 2px 4px;
transform:scale(1.7);
z-index:1000;
background-color:rgba(0,255,127,.5);
}
.roulette {
overflow: hidden; height: 126px; width: 532px;
}
.roulette-inner {
position: relative; top: 24px; width: 17000px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
jQuery.easing['easeInOutQuart'] = function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
$(function() {
var k = 45, n = 7, w = 76; //количество картинок , сколько показывать , ширина картинки
for (var i=0; i<k; i++) {
$("<img>", {src : "https://dummyimage.com/72x72/d1e02d/03040d.jpg&text="+i}).appendTo(".roulette-inner")
}
for (var i=0; i<k; i++) {
$("<img>", {src : "https://dummyimage.com/72x72/d1e02d/03040d.jpg&text="+i}).appendTo(".roulette-inner")
}
$(".roulette").width(n * w) ;
$(".roulette-inner").width(2 * k * w + w)
var option = {
speed: 5,
duration: 3,
stopImageNumber: 0
};
var old = 0;
$("#go").click(function() {
option.stopImageNumber = Math.random() * k|0;
$(".roulette-inner img").removeClass("active");
$("#config").text(JSON.stringify(option));
$({
left: old * w
}).animate({
left: (k * w) * option.speed + w * (option.stopImageNumber + (k - Math.floor(n/2)))
}, {
duration: option.duration * 1000,
easing: "easeInOutQuart",
step: function(a) {
$(".roulette-inner").css("transform", "translateX(-" + a % (k * w) + "px)");
},
complete: function() {
old = option.stopImageNumber + (option.stopImageNumber < Math.floor(n/2)) * k
$(".roulette-inner img").eq(old).addClass("active");
old = option.stopImageNumber + (k - Math.floor(n/2))
}
});
})
});
</script>
</head>
<body>
<h2>Config: <span id="config"></span></h2>
<div class="roulette">
<div class="roulette-inner">
</div>
</div>
<button id="go">Go</button>
</body>
</html>
|