Форум программистов, компьютерный форум, киберфорум
jQuery
Форум программистов и сисадминов Киберфорум > Форум web-программистов > JavaScript > jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.89/75: Рейтинг темы: голосов - 75, средняя оценка - 4.89
4 / 4 / 0
Регистрация: 23.01.2015
Сообщений: 108

Рулетка

13.08.2019, 15:23. Показов 14471. Ответов 10
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
Доброго времени суток!

Есть рулетка на JS и HTML
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

<!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;
   border:2px solid rgba(89,0,153,.2);
   padding:10px;
 }
 
 .roulette-inner img.active{
   border:2px solid rgba(89,0,153,.2);
   box-sizing:border-box;
   border-radius:10%;
   padding:-4px 4px 2px 4px;
   transform:scale(1.7);
   z-index:1000;
   background-color:rgba(0,255,127,.5);
 }
 </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: 6,
        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 + 75 * (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>
 
<br><br><br>
<h2>Config: <span id="config"></span></h2>
<br><br>
 
<div class="roulette" style="overflow: hidden; height: 126px; width: 844px;">
<div class="roulette-inner" style="position: relative; top: 24px; width: 7000px;">
<img src="https://raw.githubusercontent.com/skryshtafovych/Lottery-html5/master/star.png" style="display: block; float: left;">
<img src="https://raw.githubusercontent.com/skryshtafovych/Lottery-html5/master/flower.png" style="display: block; float: left;">
<img src="https://raw.githubusercontent.com/skryshtafovych/Lottery-html5/master/coin.png" style="display: block; float: left;">
<img src="https://raw.githubusercontent.com/skryshtafovych/Lottery-html5/master/mshroom.png" style="display: block; float: left;">
<img src="https://raw.githubusercontent.com/skryshtafovych/Lottery-html5/master/chomp.png" style="display: block; float: left;">
<img src="https://icon-icons.com/icons2/206/PNG/128/Flower_-_Fire_24653.png" style="display: block; float: left;">
<img src="http://img.informer.com/icons_mac/png/128/218/218340.png" style="display: block; float: left;">
<img src="https://icon-icons.com/icons2/249/PNG/128/Lamp_27000.png" style="display: block; float: left;">
<img src="http://www.iconninja.com/files/817/63/651/orange-monster-icon.png" style="display: block; float: left;">
<img src="http://www.fsiv.com/publics/images/featured.png" style="display: block; float: left;">
<img src="http://wiki.tockdom.com/w/images/3/36/Piranha_Plant_Cup.png" style="display: block; float: left;">
<img src="https://raw.githubusercontent.com/skryshtafovych/Lottery-html5/master/star.png" style="display: block; float: left;">
<img src="https://raw.githubusercontent.com/skryshtafovych/Lottery-html5/master/flower.png" style="display: block; float: left;">
<img src="https://raw.githubusercontent.com/skryshtafovych/Lottery-html5/master/coin.png" style="display: block; float: left;">
<img src="https://raw.githubusercontent.com/skryshtafovych/Lottery-html5/master/mshroom.png" style="display: block; float: left;">
<img src="https://raw.githubusercontent.com/skryshtafovych/Lottery-html5/master/chomp.png" style="display: block; float: left;">
<img src="https://icon-icons.com/icons2/206/PNG/128/Flower_-_Fire_24653.png" style="display: block; float: left;">
<img src="http://img.informer.com/icons_mac/png/128/218/218340.png" style="display: block; float: left;">
<img src="https://icon-icons.com/icons2/249/PNG/128/Lamp_27000.png" style="display: block; float: left;">
<img src="http://www.iconninja.com/files/817/63/651/orange-monster-icon.png" style="display: block; float: left;">
<img src="http://www.fsiv.com/publics/images/featured.png" style="display: block; float: left;">
<img src="http://wiki.tockdom.com/w/images/3/36/Piranha_Plant_Cup.png" style="display: block; float: left;">
</div>
</div>
<button id="go" onclick="play()">Go</button>
</body>
</html>
вот вопрос вот какой как сделать что бы каждый раз как останавливается рулетка выигрышный вариант останавливался всё время по середине?

Добавлено через 3 часа 34 минуты
Или в этой рулетке как возможно сделать так что бы прокручивались картинки которые в розыгрыше а не одна картинка

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!DOCTYPE html>
<html>
    <head>
        <title>taper</title>
    </head>
    <body>
        <div id="main"> 
        <div id="mxwidth">
            <ul id="boxes">
                <li class="tape"><img src="https://pp.userapi.com/c851532/v851532508/15281f/HID0UQTAJGM.jpg" alt="1" class="tape-img"></li>
                <li class="tape"><img src="https://pp.userapi.com/c851532/v851532508/152826/wjzAUrH-pdw.jpg" alt="2" class="tape-img"></li>
                <li class="tape"><img src="https://pp.userapi.com/c851532/v851532508/15282d/vovZIefw-pU.jpg" alt="3" class="tape-img"></li>
                <li class="tape"><img src="https://pp.userapi.com/c851532/v851532508/152834/UuRT1wYIYRA.jpg" alt="4" class="tape-img"></li>
                <li class="tape"><img src="https://pp.userapi.com/c851532/v851532508/15283b/aPRqEZjQyBs.jpg" alt="5" class="tape-img"></li>
                <li class="tape"><img src="https://pp.userapi.com/c851532/v851532508/152842/wx6nV0vdCSY.jpg" alt="6" class="tape-img"></li>
                <li class="tape"><img src="https://pp.userapi.com/c851532/v851532508/152849/I6lkylgXSXM.jpg" alt="7" class="tape-img"></li>
            </ul>
       </div>
       <div id="win">
       </div>
    </div>
    <button onclick="start()" class="mainbutt">Крутить</button>
    <div class="state"></div>   
    <div class="blscreen">
        <div class="winblock">
            <button class="close">×</button>
            <h3>Ваш выйгрыш</h3>
            <div class="addimg">
                <img alt="wins">
        </div>
        <h4>Повышение звания</h4>
        <p>Стоимость: <span>2000р</span></p>
        <input type="name" placeholder="Ваш ник" class="wininp">
            <button onclick="start()" class="winbutt">Крутить еще</button>
        </div>
    </div>
 
    </body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232

* {
    margin: 0;
    padding: 0;
    font-family:arial;
    outline:none;
    box-shadow:0 0 2px red inset;
}
body {
/*  background:url(img/backgr.jpg) no-repeat;
    background-size:cover;*/
    background:#232826;
    
}
button {
    cursor: pointer;
}
.tape-img {
  margin:0px;
  padding:0px;
    width:160px;
    height:150px;
    position:relative;
  }
 
.tape {
    position:relative;
    right:20px;
  height:150px;
  width:160px;
 /* margin:10px 0px;
*/}
 
li,ul {
    list-style:none;
    display:inline-block;
    content:"";
}
#main {
    width:640px;
    margin:100px auto 20px auto;
    overflow-x:hidden;
/*overflow-y:hidden;*/
    border:1px #00DF7E solid;
    box-shadow: 0 0 100px 1px rgba(0,220,100,0.3) ;
}
#mxwidth {      
    width:100%;
    margin:0 auto;
}
.tape:nth-child(3) {
    /*box-shadow:0px 0px 0 2px red ;*/
}
#win {
    position:absolute;
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent;
    border-top: 10px solid #fefefe ;
    top:101px;
    left:49.5%;
}
#boxes {
    width:200%;
  height:150px;
}
.mainbutt {
        padding:15px 35px;
        color: #00DF7E ;
        background:rgba(0,0,0,0.5);
        font-weight:bold;
        letter-spacing:1px;
        border:none;
        border:1px #00DF7E solid;
        display:block;
        border-radius:30px;
        margin:0 auto;
        outline:none;
}
h1 {
    color:white;
}
.hdblock {
    float:left;
    color:#EDEDED;
    font-family:arial;
}
span {
    padding:5px 7px 3px 7px;
    border-radius:50%;
    color: #00DF7E ;
    font-size:10px;
    border:1px #00DF7E solid;
}
.opn {
    position:absolute;
    z-index:6;
    background: rgba(0,0,0,0.8);
    padding:10px;
    border:1px #dedede solid;
    display:none;
}
.opn img {
    
}
span:hover {
        background:#dedede;
}
.block {
    display:block;
}
.minprofile {
     font-size:16px;
    color: #EDEDED;
    display:grid;
    grid-template-columns:25% 90%;
    position:relative;
    float:right;
}
.minprofile img {
    width:30px;
    border-radius:50%;
    margin-top:8px;
    border:1px #DEDEDE solid;
}
.minprofile p {
    font-weight:lighter;
}
.minprofile h4 { 
     padding-bottom:8px;
     text-transform:uppercase;
}
.minprofile div:before {
    content:"";
    display:block;
    width:130px;
    height:2px;
    background:radial-gradient(#00DF7E 2%,transparent 80%);
    position:relative;
    top:+24px;
}
.header {
    display:table;
    width:96%;
    margin:20px auto 0px auto;
}
.logo {
    width:400px;
    display:block;
    margin:0px auto 40px auto;
}
.state {
    color:blue;
    background:black;
    padding:20px 10px;
    position:absolute;
    bottom:0px;
    border-top:1px blue solid;
    
}
.blscreen {
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    position:absolute;
    top:0px;
    display:none;
}
.winblock {
    margin:125px auto;
    width:300px;
    height:400px;
    background:#1C201F;
    display:block;
}
.winblock h3 {
    color:#fbfbfb;
    text-align:center;
    padding-bottom:5px;
}
.winblock img {
    margin:0 auto;
    display:block;
    border:1px #00DF7E solid;
    box-shadow: 0 0 80px 1px rgba(0,220,100,0.4);
  height:150px;
  width:170px;
}
.winblock span {
    border:none;
}
.winbutt {
    color:#fbfbfb;
    margin:0 auto;
    display:block;
    padding:10px 55px;
    font-size:18px;
    background:linear-gradient(90deg, #4AFFBE, #00DF7E );
    border:none;
    border-bottom:3px #00BA84 solid;
}
.winblock h4 {
    text-align:center;
    text-transform:uppercase;
    color:#00DF7E;
    font-weight:lighter;
    padding:10px 0px 10px 0px;
}
.winblock p {
    color:#606663;
    font-size:14px;
    margin-left:40px;
}
.winblock span {
    padding:0;
    font-size:12px;
}
.close {
    background:none;
    color:#606663;
    font-size:35px;
    border:none;
    height:40px;
    position: relative;
    left: 90%;
}
.wininp {
    background:#1E1B1B;
    padding:15px 20px;
    border:1px #00DF7E solid;
    margin:10px auto;
    display:block;
    color:#fbfbfb;
}
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

function start()    {
 
        var boxed = 3; // начинаем считать кейсы
        var righ = 0;   // делаем анимацию увеличивая позицию в право
        var speed = Math.floor(Math.random() * (20 - 25 + 1)) + 25;  // Скорость прокрутки рулетки
        var delbox = 164; //Ширина кейса для удаления его
        var tim = setInterval(animated,10); 
         
        $("button").css("opacity","0.5");
        $(".mainbutt").removeAttr("onclick");
 
     function animated() {
        var imgs = Math.floor(Math.random() * (7 - 1 + 1)) + 1; //Случайная картинка
        var child3 = $(".tape:nth-child(3) img"); // Подсвечиваем товар которыый по середине
        var firS = $(".tape:first-child");
        var cons = righ - delbox;    //считаем на сколько блок зашел за границу
    
     if (righ >= delbox) {      //если блок за границей
         firS.remove();         // удаляем его
          $("#boxes").append("<li class='tape'><img src='https://pp.userapi.com/c851532/v851532508/152849/I6lkylgXSXM.jpg' alt="+imgs+" class='tape-img'></li>");//И добавляем новый
            righ = cons + speed; 
          $(".tape").css("right",righ + "px");
         boxed++; // Считаем кол-во блоков        
    } else {
        if(speed <= 2) {
            speed -= 0.003;
        } else if (speed <= 6) {
            speed -= 0.007;
        } else {
            speed -= 0.02;
    }
       righ += speed;
        $(".tape").css("right",righ + "px");
    }
    if (speed <= 0) {
      clearInterval(tim);
        $(".tape").animate({right: "95px"},2400);
        $(".addimg img").attr("src" ,"img/20181001_"+child3.attr("alt")+".png");
      setTimeout(swi,2500);
    }
        $(".state").html("бокс: "+boxed+"<br>Позиция: "+ righ+"<br>Скорость: "+speed+"<br> Отступ: "+cons);                    
        }
    }
function swi() {
        var nnu = $(".tape:nth-child(3) img").attr("alt");
    
         $(".mainbutt").attr("onclick","start()");
         $(".blscreen").toggle(400);
         $("button").css("opacity","1");    
        
            switch(nnu) {
            case "1":
                $(".winblock h4").text("VIP'ка");
                $(".winblock span").text("300р");
            break;
             case "2":
                $(".winblock h4").text("ADM + VIP");
                $(".winblock span").text("600р");
            break;
             case "3":
                $(".winblock h4").text("Повышение звания");
                $(".winblock span").text("100р");
            break;
             case "4":
                $(".winblock h4").text("Префикс");
                $(".winblock span").text("50р");
            break;
             case "5":
                $(".winblock h4").text("Ник под пароль");
                $(".winblock span").text("75р");
            break;
             case "6":
                $(".winblock h4").text("Смотритель");
                $(".winblock span").text("800р");
            break;
             case "7":
                $(".winblock h4").text("Админка");
                $(".winblock span").text("400р");
            break;
        }
}
//делаем список что выпадает
$(function () {
        $("span").click(function () {
            $(".opn").toggle(300);
    });
    $(".close,.winbutt").click(function () {
        $(".blscreen").toggle(400);
    })
 });
пример этого скрипта тут
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
 13.08.2019, 15:23
Ответы с готовыми решениями:

Рулетка
Пусть программа загадает такое число, а пользователь введет предполагаемое значение. Если число угадано, программа поздравит победителя, а...

Рулетка
Народ , помогите плиз задачу решить и сделайте алгоритм. В казино в игре &quot;Рулетка&quot; шарик запустили 200 раз. Сколько невыпавших...

Рулетка
Доброй ночи. Потребовалось разработать рулетку, функционал простенький, но вот не знаю с чего начать. Нужно сделать что-то типа рулетки...

10
4 / 4 / 0
Регистрация: 23.01.2015
Сообщений: 108
14.08.2019, 17:13  [ТС]
Помогите пожалуйста в этой рулетке не много доработать

При прокрутке рулетки изображения прокручиваются вверх я хотел бы что бы они прокручивались влево и по бокам еще добавить по одному окну но выигрыш был бы только в центре

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306

<!DOCTYPE html>
<html>
<head>
 
  <meta charset="UTF-8">
  <title>Roulette</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
 
    <style>
div.roulette {
  margin-top: 35px;
}
 
div.roulette-inner {
  left: 33px;
}
 
div.roulette {}
 
div.roulette_container {
  background-color: rgb(253, 252, 253);
  width: 200px;
  height: 200px;
  border: 1px solid rgba(253, 252, 253, 0.31);
  box-shadow: 0px 0px 3px lightpink;
  margin: auto;
}
    </style>
 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
(function($) {
    var Roulette = function(options) {
        var defaultSettings = {
            maxPlayCount : null, // x >= 0 or null
            speed : 10, // x > 0
            stopImageNumber : null, // x >= 0 or null or -1
            rollCount : 3, // x >= 0
            duration : 3, //(x second)
            stopCallback : function() {
            },
            startCallback : function() {
            },
            slowDownCallback : function() {
            }
        }
        var defaultProperty = {
            playCount : 0,
            $rouletteTarget : null,
            imageCount : null,
            $images : null,
            originalStopImageNumber : null,
            totalHeight : null,
            topPosition : 0,
 
            maxDistance : null,
            slowDownStartDistance : null,
 
            isRunUp : true,
            isSlowdown : false,
            isStop : false,
 
            distance : 0,
            runUpDistance : null,
            slowdownTimer : null,
            isIE : navigator.userAgent.toLowerCase().indexOf('msie') > -1 // TODO IE
        };
        var p = $.extend({}, defaultSettings, options, defaultProperty);
 
        var reset = function() {
            p.maxDistance = defaultProperty.maxDistance;
            p.slowDownStartDistance = defaultProperty.slowDownStartDistance;
            p.distance = defaultProperty.distance;
            p.isRunUp = defaultProperty.isRunUp;
            p.isSlowdown = defaultProperty.isSlowdown;
            p.isStop = defaultProperty.isStop;
            p.topPosition = defaultProperty.topPosition;
 
            clearTimeout(p.slowDownTimer);
        }
 
        var slowDownSetup = function() {
            if(p.isSlowdown){
                return;
            }
            p.slowDownCallback();
            p.isSlowdown = true;
            p.slowDownStartDistance = p.distance;
            p.maxDistance = p.distance + (2*p.totalHeight);
            p.maxDistance += p.imageHeight - p.topPosition % p.imageHeight;
            if (p.stopImageNumber != null) {
                p.maxDistance += (p.totalHeight - (p.maxDistance % p.totalHeight) + (p.stopImageNumber * p.imageHeight))
                        % p.totalHeight;
            }
        }
 
        var roll = function() {
            var speed_ = p.speed;
 
            if (p.isRunUp) {
                if (p.distance <= p.runUpDistance) {
                    var rate_ = ~~((p.distance / p.runUpDistance) * p.speed);
                    speed_ = rate_ + 1;
                } else {
                    p.isRunUp = false;
                }
 
            } else if (p.isSlowdown) {
                var rate_ = ~~(((p.maxDistance - p.distance) / (p.maxDistance - p.slowDownStartDistance)) * (p.speed));
                speed_ = rate_ + 1;
            }
 
            if (p.maxDistance && p.distance >= p.maxDistance) {
                p.isStop = true;
                reset();
                p.stopCallback(p.$rouletteTarget.find('img').eq(p.stopImageNumber));
alert(p.stopImageNumber);
                return;
            }
            p.distance += speed_;
            p.topPosition += speed_;
            if (p.topPosition >= p.totalHeight) {
                p.topPosition = p.topPosition - p.totalHeight;
            }
            // TODO IE
            if (p.isIE) {
                p.$rouletteTarget.css('top', '-' + p.topPosition + 'px');
            } else {
                // TODO more smooth roll
                p.$rouletteTarget.css('transform', 'translate(0px, -' + p.topPosition + 'px)');
            }
            setTimeout(roll, 1);
        }
 
        var init = function($roulette) {
            $roulette.css({ 'overflow' : 'hidden' });
            defaultProperty.originalStopImageNumber = p.stopImageNumber;
            if (!p.$images) {
                p.$images = $roulette.find('img').remove();
                p.imageCount = p.$images.length;
                p.$images.eq(0).bind('load',function(){
                    p.imageHeight = $(this).height();
                    $roulette.css({ 'height' : (p.imageHeight + 'px') });
                    p.totalHeight = p.imageCount * p.imageHeight;
                    p.runUpDistance = 2 * p.imageHeight;
                }).each(function(){
                    if (this.complete || this.complete === undefined){
                        var src = this.src;
                        // set BLANK image
                        this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
                        this.src = src;
                    }
                });
            }
            $roulette.find('div').remove();
            p.$images.css({
                'display' : 'block'
            });
            p.$rouletteTarget = $('<div>').css({
                'position' : 'relative',
                'top' : '0'
            }).attr('class',"roulette-inner");
            $roulette.append(p.$rouletteTarget);
            p.$rouletteTarget.append(p.$images);
            p.$rouletteTarget.append(p.$images.eq(0).clone());
            $roulette.show();
        }
 
        var start = function() {
            p.playCount++;
            if (p.maxPlayCount && p.playCount > p.maxPlayCount) {
                return;
            }
            p.stopImageNumber = $.isNumeric(defaultProperty.originalStopImageNumber) && Number(defaultProperty.originalStopImageNumber) >= 0 ?
                                    Number(defaultProperty.originalStopImageNumber) : Math.floor(Math.random() * p.imageCount);
            p.startCallback();
            roll();
            p.slowDownTimer = setTimeout(function(){
                slowDownSetup();
            }, p.duration * 1000);
        }
 
        var stop = function(option) {
            if (!p.isSlowdown) {
                if (option) {
                    var stopImageNumber = Number(option.stopImageNumber);
                    if (0 <= stopImageNumber && stopImageNumber <= (p.imageCount - 1)) {
                        p.stopImageNumber = option.stopImageNumber;
                    }
                }
                slowDownSetup();
            }
        }
        var option = function(options) {
            p = $.extend(p, options);
            p.speed = Number(p.speed);
            p.duration = Number(p.duration);
            p.duration = p.duration > 1 ? p.duration - 1 : 1;
            defaultProperty.originalStopImageNumber = options.stopImageNumber;
        }
 
        var ret = {
            start : start,
            stop : stop,
            init : init,
            option : option
        }
        return ret;
    }
 
    var pluginName = 'roulette';
    $.fn[pluginName] = function(method, options) {
        return this.each(function() {
            var self = $(this);
            var roulette = self.data('plugin_' + pluginName);
 
            if (roulette) {
                if (roulette[method]) {
                    roulette[method](options);
                } else {
                    console && console.error('Method ' + method + ' does not exist on jQuery.roulette');
                }
            } else {
                roulette = new Roulette(method);
                roulette.init(self, method);
                $(this).data('plugin_' + pluginName, roulette);
            }
        });
    }
})(jQuery);
</script>
<script type="text/javascript">
 
$(document).ready(function () {
function randomInteger(min, max) {
  var rand = min + Math.random() * (max - min)
  rand = Math.round(rand);
  return rand;
}
 
let rull = $('div.roulette');
  var option = {
    speed: 4,
    duration: 5,
    stopImageNumber: 1,
    startCallback: function() {
      console.log('start');
    },
    slowDownCallback: function() {
      console.log('slowDown');
    },
    stopCallback: function($stopElm) {
      console.log($stopElm);
      $('#win').html('<img src="' + $stopElm[0].currentSrc + '" width="130" style="display: block;">');
    }
  }
 
  rull.roulette('option', option);
  
$('#button_buy').on('click', function() {
  rull.roulette('start');
});
});
</script>
 
</head>
 
<body>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="row">
              <div class="col-md-12">
                <div class="roulette_container">
                  <div class="roulette">
                    <img src="https://freshcoal.com/images/main/42db67b6-9dd1-4bfe-b478-8829c1.png" width="130">
                    <img src="https://freshcoal.com/images/main/e25bd6ef-8c67-497b-be71-48923b.png" width="130">
                    <img src="https://freshcoal.com/images/main/d0f793ff-b041-427c-bc24-440834.png" width="130">
                    <img src="https://freshcoal.com/images/main/2ab25358-deaa-46b7-b351-d9732a.png" width="130">
                    <img src="https://freshcoal.com/images/main/23378bd2-28e5-4d7e-8d39-621b73.png" width="130">
                    <img src="https://freshcoal.com/images/main/7ceb88b2-7f5f-4399-abb9-706825.png" width="130">
                    <img src="https://freshcoal.com/images/main/664dd492-3fcd-443b-9e61-4c7ebd.png" width="130">
                    <img src="https://freshcoal.com/images/main/87324464-1700-468f-8333-e7779e.png" width="130">
                  </div>
                </div>
                <div class="col-md-12 text-center mt-4">
                  <button class="btn btn-success" id="button_buy">
                                    Крутить
                                </button>
                </div>
                <div class="col-md-12 text-center mt-4">
                  <p id="win" class="text-center mx-auto"></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
 
</body>
</html>
изменил
p.$rouletteTarget.css('transform', 'translate(0px, -' + p.topPosition + 'px)');
на
p.$rouletteTarget.css('transform', 'translate( -' + p.topPosition + ', 0px)');

Прокрутка пошла влево как мне и надо вот только изображения располдожены вертикально а не горизонтально ... float:left не помогает

Пример тут
0
4 / 4 / 0
Регистрация: 23.01.2015
Сообщений: 108
15.08.2019, 14:53  [ТС]
Не кто не может помочь решить данный вопрос?

Я с JavaScript не очень дружу =(
0
4 / 4 / 0
Регистрация: 23.01.2015
Сообщений: 108
16.08.2019, 16:54  [ТС]
Мда я всегда думал что форумы существуют для того что бы помогать друг другу ... так сказать поставить на путь истинный но увы похоже я ошибся =(

Я не думаю что нет не одного человека который бы не знал и не знает решения данной задачи ... да и в принципе это уже не важно так как почти всё уже решил сам осталось пару мелочей, которые рано или поздно все равно преодолею ... и всё же всё равно хочется верить что когда то мир наш изменится и люди начнут помогать друг другу ... Всем МИРА и ДОБРА!!!
0
16.08.2019, 21:24

Не по теме:

Цитата Сообщение от s88s Посмотреть сообщение
так как почти всё уже решил сам осталось пару мелочей
Представьте: сами решили одну сложную задачу, затем еще одну, глядишь и через месяц все пойдет намного легче и не нужно будет у кого-то спрашивать решения.

0
4 / 4 / 0
Регистрация: 23.01.2015
Сообщений: 108
16.08.2019, 23:31  [ТС]
Согласен с Вами когда решаешь сам это полезно и хорошо. Но можно хотя бы пнуть в нужном направлении это иногда бывает полезно особенно когда человек зашел в тупик
0
17.08.2019, 00:00

Не по теме:

Цитата Сообщение от s88s Посмотреть сообщение
можно хотя бы пнуть в нужном направлении
У вас там css нужно менять, js нужно менять, html наверное тоже нужно корректировать. В каком именно направлении вас пнуть? Там комплексную работу нужно проделать. Другое дело если бы вы поставили конкретный вопрос, который у вас возник в процессе решения своей задачи, и уверен вам бы помогли. Дальше бы начали делать... снова встал вопрос? -> спросили -> вам помогли.

0
4 / 4 / 0
Регистрация: 23.01.2015
Сообщений: 108
17.08.2019, 09:33  [ТС]
В последней рулетке мне не понятно почему два первых изображения удаляются? Вот какому я результату пришел
0
28 / 24 / 10
Регистрация: 26.04.2015
Сообщений: 307
22.08.2019, 12:52
Цитата Сообщение от s88s Посмотреть сообщение
В последней рулетке мне не понятно почему два первых изображения удаляются? Вот какому я результату пришел
у вас в 16-й строке html лишний закрывающий </div>
в CSS у вас есть дублирование селекторов .winblock span - объедините.
Ну а после, не знаю почему у вас пропадают 2 первых изображения, у меня они визуально видны, или я не так вас понимаю?
Вот что вижу:
1
4 / 4 / 0
Регистрация: 23.01.2015
Сообщений: 108
23.08.2019, 11:12  [ТС]
Спасибо за ответ ... я уже разобрался с тем почему пропадает изображение
0
 Аватар для Уф
890 / 725 / 447
Регистрация: 13.07.2015
Сообщений: 2,277
23.08.2019, 15:45
че рулетка которая ролится у клинта на компе через JS? бхаха, сольют тебе весь дроп, события должны генерироваться на сервере, а в браузере только результат показываешь
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
 23.08.2019, 15:45
Помогаю со студенческими работами здесь

Рулетка
Помогите пожалуйста решить задачу )) Надо написать программу моделирующую игру в рулетку,алгоритм красное-черное. Программа должна работать...

Рулетка!
Задача заключается в том что бы проверить ГСЧ на его идеальность.С этим нам и должна помочь &quot;рулетка&quot;. У нас есть 2 цвета красный...

Чат рулетка
Есть желание поставить чат рулетку на сайт. Но где именно копать? В некоторых чатах, возможно напрямую получать из браузера голос и...

Русская рулетка
Всем привет, решил написать игру &quot;Русскую рулетку&quot; в консольном виде, ничего не получается, ,буду благодарен за помощь P.S Я...

Русская рулетка
Всё больше и больше убеждаюсь в том, что индексацией сайта занимается какой то робот, который вибирает сайт для индексации методом набора...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Новые блоги и статьи
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Access
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
 Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru