|
Сообщение от sayman100
|
|
заменить картинки div блоками,
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
position: relative;
}
.roulette-inner div {
width: 72px;
height: 72px;
margin: 2px;
border: 1px solid #0000FF;
text-align: center;
line-height: 72px;
}
.roulette-inner div.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-inner div.active:after{
content: ' click me';
}
.roulette {
overflow: hidden;
height: 126px;
width: 532px;
border: 3px solid #8B4513;
}
.roulette-inner {
position: relative;
top: 24px;
width: 17000px;
display: flex;
}
</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 (let i = 0; i < k; i++) {
$("<div>", {
text: +i,
click: function() {
if (this.classList.contains('active')) alert(i)
}
}).appendTo(".roulette-inner");
}
for (let i = 0; i < k; i++) {
$("<div>", {
text: +i,
click: function() {
if (this.classList.contains('active')) alert(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 div").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 div").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>