Проблема с анимированием карусели рандомных картинок
Здравствуйте, господа и дамы. Возникла проблема: при воспроизведении при нажатии на кнопку анимация подтормаживает (а именно прыгает к первой картинке и визуально начинает прокрутку с первой картинки). Также, чаще всего рандом выбирает только 1 картинку, некоторые и вовсе не выбирает (проверено в районе 100 кручений)
Буду очень рад Вашей помощи) Вот собственно сам код:
<head>
...
<script>
jQuery.easing['easeOutCirc'] = function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
}
$(function() {
var option = {
speed: 2,
duration: 3,
stopImageNumber: 4
};
$("#go").click(function() {
$('#go').prop('disabled', true);
option.stopImageNumber = Math.random() * 11|0;
$(".roulette-inner img").removeClass("active");
$("#config").text(JSON.stringify(option));
$({
left: 0
}).animate({
left: 844 * option.speed + 7 * (option.stopImageNumber + 6)
}, {
duration: option.duration * 1000,
easing: "easeOutCirc",
step: function(a) {
$(".roulette-inner").css("transform", "translateX(-" + a % 844 + "px)");
},
complete: function() {
$(".roulette-inner img").eq(option.stopImageNumber + (option.stopImageNumber < 6) * 11).addClass("active");
$('#go').prop('disabled', false);
}
});
})
});
</script>
</head>
<body>
<div class="roulette" style="overflow: hidden; height: 300px; width: 1000px;">
<div class="roulette-inner" style="position: relative; top: 24px; width: 10000px;">
<img src="images/1.png" style="display: block; float: left;">
<img src="images/2.png" style="display: block; float: left;">
<img src="images/3.png" style="display: block; float: left;">
<img src="images/4.png" style="display: block; float: left;">
<img src="images/5.png" style="display: block; float: left;">
<img src="images/6.png" style="display: block; float: left;">
<img src="images/7.png" style="display: block; float: left;">
<img src="images/8.png" style="display: block; float: left;">
<img src="images/9.png" style="display: block; float: left;">
</div>
</div>
</br>
<div class=button style="position: relative; height: 150px; wigth: 1000px;">
<button id="go" onclick="play()" class="btn btn-primary py-3 px-4">Lets Start</button>
</div>
...
</body>
|
Цитата:
option.stopImageNumber = Math.random() * $(".roulette-inner img").length|0;
строка 31
$(".roulette-inner img").eq(option.stopImageNumber).addClass("active");
|
Цитата:
|
EvanBrown,
заменить строки на предложенный код. |
К сожалению, не помогло(
|
EvanBrown,
выпадает одно и тоже? |
Цитата:
|
EvanBrown,
:-?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.roulette-inner img.active{
border: 5px solid #FF00FF;
border-radius: 3px;
}
.roulette-inner{
display: flex;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
jQuery.easing['easeOutCirc'] = function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
}
$(function() {
var option = {
speed: 2,
duration: 3,
stopImageNumber: 0
};
$("#go").click(function() {
var len = $(".roulette-inner img").length;
var width = $(".roulette-inner img:first").width();
var widthTotall = len * width;
$('#go').prop('disabled', true);
option.stopImageNumber = Math.random() * len|0;
$(".roulette-inner img").removeClass("active");
$("#config").text(JSON.stringify(option));
$({
left: 0
}).animate({
left: widthTotall * option.speed
}, {
duration: option.duration * 1000,
easing: "easeOutCirc",
step: function(a) {
$(".roulette-inner").css("transform", "translateX(-" + (a % widthTotall)+ "px)");
},
complete: function() {
$(".roulette-inner img").eq(option.stopImageNumber).addClass("active");
$('#go').prop('disabled', false);
}
});
})
});
</script>
</head>
<body>
<div class="roulette" style="overflow: hidden; height: 300px; width: 1000px;">
<div class="roulette-inner" style="position: relative; top: 24px; width: 10000px;">
<img src="https://picsum.photos/100/100?1">
<img src="https://picsum.photos/100/100?2">
<img src="https://picsum.photos/100/100?3">
<img src="https://picsum.photos/100/100?4">
<img src="https://picsum.photos/100/100?5">
<img src="https://picsum.photos/100/100?6">
<img src="https://picsum.photos/100/100?7">
<img src="https://picsum.photos/100/100?8">
<img src="https://picsum.photos/100/100?9">
</div>
</div>
</br>
<div class=button style="position: relative; height: 150px; wigth: 1000px;">
<button id="go" class="btn btn-primary py-3 px-4">Lets Start</button>
</div>
<div id="config"></div>
</body>
</html>
|
У меня немножко другая система. Мне надо, чтобы рандомная картинка остановилась в центре
|
рулетка горизонтальная
Цитата:
<!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>
|
| Часовой пояс GMT +3, время: 19:09. |