Помогите плиз, кому не жалко 5 минут времени, сделайте уже то что мне нужно, ото я 3 часа пытался сделать, но не получается.
1. Мне нужно чтобы случайное число я мог писать через php. То есть чтобы крутилка, выдавала нужный мне вариант.
2. Нужно чтобы Победный вариант, был по середине других вариантов. То есть к примеру, 3 других варианта с право и лево.
3. Нужно чтобы я мог в место цифр, вставлять картинки. То что тут написано, я пробовал, но у меня в место цифр, ссылки на картинки не катят
Там нужно как то по другому, но я не шарю.
Последний вариант, наиболее подходящий. Я его пытался изменить под то что мне нужно.
http://jsfiddle.net/rwsj9bdo/
Ещё вариант, уже готовый, но я не шарю
Хотел убрать всё лишнее, чтобы можно было просто использовать сам эффект.
<div class="row" id="roulette">
<div class="col-md-12 text-center">
<div class="slider-wrap">
<div class="fix"></div>
<div class="carousel-body">
<ul id="carousel">
<li><img src="http://img-host.ucoz.com/_bd/2/51675254.png" alt="#"></li>
<li><img src="http://img-host.ucoz.com/_bd/2/51675254.png" alt="#"></li>
<li><img src="http://img-host.ucoz.com/_bd/2/92272003.png" alt="#"></li>
<li><img src="./ruletca_files/r-img3.png" alt="#"></li>
<li><img src="./ruletca_files/r-img4.png" alt="#"></li>
<li><img src="http://img-host.ucoz.com/_bd/2/94140269.png" alt="#"></li>
<li><img src="http://img-host.ucoz.com/_bd/2/94140269.png" alt="#"></li>
<li><img src="./ruletca_files/r-img3.png" alt="#"></li>
<li><img src="./ruletca_files/r-img6.png" alt="#"></li>
<li><img src="./ruletca_files/r-img7.png" alt="#"></li>
<li><img src="./ruletca_files/r-img9.png" alt="#"></li>
<li><img src="http://img-host.ucoz.com/_bd/2/94140269.png" alt="#"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row" id="error_msg" style="display: none;">
<div class="col-md-6 col-sm-8 col-xs-12 col-md-offset-3 col-sm-offset-2 col-xs-offset-0">
<div id="error_message" class="error">Ошибка!</div>
</div>
</div>
<div class="row" id="btn">
<div class="col-md-12 text-center"><button class="spinn" onclick="roulette.run();">Крутить</button></div>
</div>
.fix {
position: absolute;
content: '';
background: url([url]http://img-host.ucoz.com/_bd/2/79291116.png[/url]) center top no-repeat;
width: 29px;
height: 179px;
bottom: -20px;
left: 50%;
margin-left: -15px;
z-index: 30;
}
.slider-wrap .carousel-body,
.slider-wrap #carousel {
list-style: none;
overflow: hidden;
position: relative;
left: 0px;
white-space: nowrap;
}
.slider-wrap ul {
list-style: none;
overflow: hidden;
position: relative;
left: 0px;
white-space: nowrap;
}
.slider-wrap li{
position: relative;
border: 1px solid #fdbf03;
height: 100px;
border-radius: 50%;
text-align: center;
width: 100px;
display: inline-block;
margin: 0px 6px;
}
.slider-wrap li img{
display: block;
position: absolute;
bottom: 50%;
margin-bottom: -20px;
right: 50%;
margin-right: -40px;
width: 80px;
height: 40px;
}
.roulette .spinn{
display: inline-block;
border: none;
outline: none;
background-color: #fdbf03;
color: #fff;
font-size: 16px;
padding: 21px 98px;
border-radius: 45px;
-webkit-box-shadow: 0px 0px 101px -7px rgba(253,191,3,0.56);
-moz-box-shadow: 0px 0px 101px -7px rgba(253,191,3,0.56);
box-shadow: 0px 0px 101px -7px rgba(253,191,3,0.56);
transition: 0.5s;
margin-bottom: 60px;
}
.roulette .spinn:hover{
background-color: #fdb903;
-webkit-box-shadow: 0px 0px 121px -7px rgba(253,191,3,1);
-moz-box-shadow: 0px 0px 121px -7px rgba(253,191,3,1);
box-shadow: 0px 0px 121px -7px rgba(253,191,3,1);
}
.r-inf{
display: inline-block;
padding-left: 45px;
color: #666 !important;
position: relative;
font-size: 14px;
margin-left: 35px;
margin-bottom: 50px;
}
.r-inf:before{
position: absolute;
content: '';
left: 0;
top: 50%;
margin-top: -16px;
background-color: #000;
width: 31px;
height: 31px;
border-radius: 50%;
}
.roulette .left:after{
position: absolute;
content: '\f129';
left: 12px;
top: 0;
font-family: 'FontAwesome';
font-size: 14px;
color: #fff;
}
.roulette .right:after{
position: absolute;
content: '\f03a';
left: 8px;
top: 0;
font-family: 'FontAwesome';
font-size: 14px;
color: #fff;
}
.error{
display: block;
text-align: center;
font-size: 16px;
color: #fff;
background-color: #ffa4a4;
border-radius: 30px;
margin-bottom: 75px;
position: relative;
padding: 20px 0 17px;
}
.error:before{
position: absolute;
content: '\f071';
font-family: 'FontAwesome';
font-size: 16px;
color: #c53852;
left: 7%;
top: 50%;
margin-top: -6px;
}
var active = true;
var running = false;
$(window).blur(function () {
active = false;
});
$(window).focus(function () {
active = true;
});
var REDIRECT_URL = '/roulette-win.php';
function runRoulette() {
if (!running) {
running = true;
var audio = new Audio('/roulette/case_scroll.wav');
var slot_width = $('.item').outerWidth(true);
var offset = slot_width * Math.min(Math.max(Math.random(), .2), .8);
var startPos = parseInt($('#carousel').css('margin-left')) - 120;
var position = 0;
var interval = setInterval(function () {
var start_offset = parseInt($('#carousel').css('margin-left')) - startPos + 3;
var cPosition = Math.floor(start_offset / (slot_width + 6));
if (cPosition != position && cPosition < 0) {
position = cPosition;
if (active) {
audio.pause();
audio.currentTime = 0;
audio.volume = 0.25;
audio.play();
}
}
}, 10);
var leftOffset = $('#carousel').find('li[win="1"]').offset().left;
var splitterOffset = $('.fix').offset().left;
$('#carousel').animate({'margin-left': '-=' + (leftOffset - splitterOffset + offset)}, 10000, 'easeOutCubic', function () {
if (interval) clearInterval(interval);
setTimeout(function() {
$("#winblock").show();
$("#miniprofile").fadeOut();
$("#roulette").fadeOut();
$("#btn").fadeOut();
}, 400)
});
}
}
var exec = 0,
roulette = {
run: function() {
$("#error_msg").hide();
if(!running) {
$.ajax({
url: "/roulette/ajax.php",
type: "POST",
data: {ajax: true},
success: function (data) {
console.log(data);
data = $.parseJSON(data);
switch(data.status) {
case 'error':
console.log(data.error);
$("#error_msg").show();
$("#error_message").html(data.error);
break;
case 'success':
$("#balance").html(parseInt($("#balance").text()) - data.price);
$("#carousel").html("");
var winner = "";
for(var i = 0; i < 37; i++) {
if(data.items[i].winner == true) {
winner = 'win="1"';
$("#what_win_img").attr("src", data.items[i].item_img);
$("#what_win").html(data.items[i].item_name);
} else {
winner = "";
}
$("#carousel").append('<li class="item" '+ winner +'><img src="'+ data.items[i].item_img +'" alt="'+ data.items[i].item_name +'"></li>');
}
runRoulette();
break;
}
}
});
} console.log("Error: Игра уже идёт!");
}
};
Вариант который я скинул, если его кто то настроит просто под эффект, который можно будет использовать. То я буду благодарен.
