Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Нужна помощь, подправить скрипт рулетки (https://javascript.ru/forum/dom-window/72247-nuzhna-pomoshh-podpravit-skript-ruletki.html)

Morty 18.01.2018 03:00
Нужна помощь, подправить скрипт рулетки
 
Всем привет. Прошу прощения, если тема не в том разделе, вроде это самый подходящий...
В общем, есть скрипт прокрутки изображений https://codepen.io/timnew/pen/gPxKRV в котором, собственно, производится прокрутка изображений и останавливается на нужном.
Мне нужно, чтоб прокрутка производилась не вертикально, а горизонтально и чтоб отображалось не одно изображение, а скажем, 11, а выбранное изображение останавливалось посредине (5 слева, 5 справа и по центру нужное).
Помогите, пожалуйста. Уже несколько месяцев ищу подобное, вроде бы нашёл, но моих познаний в js, к сожалению, мало, чтоб сделать как нужно :(

рони 18.01.2018 03:36
Morty,
http://javascript.ru/forum/dom-windo...ontalnaya.html

Morty 18.01.2018 11:46
Цитата:
Сообщение от рони (Сообщение 475512)
Не совсем то...
здесь генерируются цифры в скрипте, а здесь одно изображение режется на части.

У меня посредством php делается выборка адресов картинок из mysql и генерируется id одного из них, на котором надо остановить прокрутку.
Тот скрипт, ссылку на который я дал в первом посте подходит наиболее всего, но надо чуток переделать...

рони 18.01.2018 11:55
Morty,

... оба скрипта по ссылке подходят под вашу задачу ... чем этот то лучше?

Morty 18.01.2018 12:44
Цитата:
Сообщение от рони (Сообщение 475558)
Morty,
... оба скрипта по ссылке подходят под вашу задачу ... чем этот то лучше?
Этот лучше тем, что я знаю как вставить туда свои картинки, в первом варианте картинок нет вообще, а во втором варианте берётся одна большая картинка и режется на куски. Мне же надо брать разные изображения.
Вполне вероятно, что можно их изменить под мои нужды, но увы, я не знаю как :(

Также этот лучше тем, что можно ему передать id элемента на котором нужно остановить прокрутку (по крайней мере это есть изначально), а в тех я не знаю как такое реализовать :(

рони 18.01.2018 13:21
Цитата:
Сообщение от Morty
Также этот лучше тем, что можно ему передать id элемента на котором нужно остановить прокрутку
может не id, а индекс?

рони 18.01.2018 13:23
Morty,
пример запроса где остановить рулетку
https://javascript.ru/forum/misc/721...tml#post474731

Morty 18.01.2018 13:51
Цитата:
Сообщение от рони (Сообщение 475571)
может не id, а индекс?
Может и индекс...
Суть такова:
php генерирует массив картинок, которые должны прокручиваться в рулетке, php функция (с учётом шанса на выпадение и общего числа элементов) определяет выигрышный элемент.
После этого нужно в рулетке прокрутить массив картинок и остановить рулетку на заданном изображении.
Именно поэтому тот скрипт, ссылку на который я указал в первом сообщении, подходит лучше других.
Я нажимаю на кнопку, отправляется запрос в php-скрипт, который выдаёт массив картинок и номер-победитель, после того, как данные получены - запускается рулетка.

Но, как я сказал выше, мне надо чтоб прокрутка производилась горизонтально и выводилось 11 изображений (хотя можно и 5), а картинка-победитель останавливалась посредине...

рони 18.01.2018 15:49
горизонтальная рулетка упрощённый вариант
 
Morty,

если хотите иметь тоже самое, но в виде исправленной версии плагина, ваши предложения в личку, но и это достаточно рабочая версия, можно использовать.

<!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;
 }

 .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);
 }
 </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() {
    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");
        }
    });
  })
});
  </script>
</head>

<body>
<h2>Config: <span id="config"></span></h2>
<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/public/images/logo-share/green/logo8.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/public/images/logo-share/green/logo8.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">Go</button>
</body>
</html>

Morty 18.01.2018 16:10
Поковырял немного скрипт, получилось сделать отображение картинок по горизонтали и прокрутку по горизонтали, однако есть косяки. Изображения не зацикливаются и прокрутка не останавливается...
(function($){
    var Roulette = function(options){
        var defaultSettings={
            maxPlayCount:null,
            speed:10,
            stopImageNumber:null,
            rollCount:3,
            duration:3,
            stopCallback:function(){},
            startCallback:function(){},
            slowDownCallback:function(){}
        };
        var defaultProperty={
            playCount:0,
            $rouletteTarget:null,
            imageCount:null,
            $images:null,
            originalStopImageNumber:null,
            totalHeight:null,
            topPosition:0,
            leftPosition:0,
            maxDistance:null,
            slowDownStartDistance:null,
            isRunUp:true,
            isSlowdown:false,
            isStop:false,
            distance:0,
            runUpDistance:null,
            isIE:navigator.userAgent.toLowerCase().indexOf("msie")>-1
        };
        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
            p.leftPosition=defaultProperty.leftPosition
        };
        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;
            p.maxDistance+=p.imageWidth-p.leftpPosition%p.imageWidth;

            if(p.stopImageNumber!=null) {
//                p.maxDistance+=(p.totalHeight-p.maxDistance%p.totalHeight+p.stopImageNumber*p.imageHeight)%p.totalHeight}
                p.maxDistance+=(p.totalWidth-p.maxDistance%p.totalWidth+p.stopImageNumber*p.imageWidth)%p.totalWidth}
        };
        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));
                return
            }
            p.distance+=speed_;
//            p.topPosition+=speed_;
            p.leftPosition+=speed_;
//            if (p.topPosition>=p.totalHeight) {
            if (p.leftPosition>=p.totalWidth) {
//                p.topPosition=p.topPosition-p.totalHeight
                p.leftPosition=p.leftPosition-p.totalWidth
            }
            if (p.isIE) {
//                p.$rouletteTarget.css("top","-"+p.topPosition+"px")
                p.$rouletteTarget.css("left","-"+p.leftPosition+"px")
            }
            else {
//                p.$rouletteTarget.css("transform","translate(0px, -"+p.topPosition+"px)")
                p.$rouletteTarget.css("transform","translate(-"+p.leftPosition+"px, 0px)")
            }
            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();
                    p.imageWidth=$(this).width();
//                    $roulette.css({height:p.imageHeight+"px"});
                    $roulette.css({height:p.imageWidth+"px"});
                    $roulette.css({width:p.imageWidth*6+"px"});
//                    p.totalHeight=p.imageCount*p.imageHeight;
                    p.totalWidth=p.imageCount*p.imageWidth;
//                    p.runUpDistance=2*p.imageHeight}
                    p.runUpDistance=2*p.imageWidth}
                ).each(function(){
                    if (this.complete||this.complete===undefined) {
                        var src=this.src;
                        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");
            p.$rouletteTarget=$("<div>").css({position:"relative",left:"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();
            setTimeout(function(){slowDownSetup()},p.duration*1e3)
        };
        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);

var option = {
    speed : 3,
    duration : 3,
    stopImageNumber : 0
}

var count = $('div.roulette').children().length

$('div.roulette').roulette(option);

$('#go').click(function() {
  //option.stopImageNumber = (Math.random() * count) >> 0;
  option.stopImageNumber = '2';
  $('#config').text(JSON.stringify(option))
  $('div.roulette')
    .roulette('option', option)
    .roulette('start');
})


Как тут вставлять спойлер?..

рони 18.01.2018 16:12
Morty,
[js  hide]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Morty 18.01.2018 16:15
Цитата:
Сообщение от рони
если хотите иметь тоже самое, но в виде исправленной версии плагина, ваши предложения в личку, но и это достаточно рабочая версия, можно использовать.
Вооот, шикарно, именно то, что я хотел :yes:
Ещё один момент, как изменить количество отображаемых изображений в ленте?

рони 18.01.2018 16:21
Цитата:
Сообщение от Morty
Ещё один момент, как изменить количество отображаемых изображений в ленте?
??? весь код перед вами, в чём проблема?

рони 18.01.2018 16:44
Цитата:
Сообщение от Morty
как изменить количество отображаемых изображений в ленте?
 
<!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;
 }

 .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);
 }
 </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: 5,
        duration: 3,
        stopImageNumber: 4
    };

 $("#go").click(function() {
    option.stopImageNumber = Math.random() * 11|0;
    $(".roulette-inner  img").removeClass("active");
    $("#config").text(JSON.stringify(option));
    $({
        left: 0
    }).animate({
        left: 844 * option.speed + 76 * (option.stopImageNumber + 9)+4
    }, {
        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 < 3) * 11).addClass("active");
        }
    });
  })
});
  </script>
</head>

<body>
<h2>Config: <span id="config"></span></h2>
<div class="roulette" style="overflow: hidden; height: 126px; width: 382px;">
<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/public/images/logo-share/green/logo8.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/public/images/logo-share/green/logo8.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">Go</button>
</body>
</html>

Morty 18.01.2018 16:48
Спасибо огромное :thanks: , а то у меня получалось так, что иногда выбранное изображение оказывалось за пределами видимости :write:


Часовой пояс GMT +3, время: 17:58.