jQuery круговой слайдер?

Question

У меня есть этот слайдер на моем сайте. Я хочу переместить ползунок на 360 градусов. Как я могу изменить следующий скрипт для этого?

$(document).ready(function() {
    /*Slider */
    $('.slider-input').each(function() {
        var currVal = $(this).val();
        if(currVal < 0){
            currVal = 0;
        }
        $(this).parent().children('.slider-content').slider({
            'animate': true,
            'min': -1,
            'max': 201,
            'value' : 201,
            'orientation' : 'vertical',
            'stop': function(e, ui){
                //$(this).prev('.slider-input').val(ui.value); //Set actual input field val, done during slide instead

                //pop handle back to top if we went out of bounds at bottom
                /*
                if ( ui.value == -1 ) {
                    ui.value = 201;
                    $(this).children('.ui-slider-handle').css('bottom','100%');
                }
                */
            },
            'slide': function(e, ui){
                var percentLeft;
                var submitValue;
                var Y = ui.value - 100; //Find center of Circle (We're using a max value and height of 200)
                var R = 100; //Circle's radius
                var skip = false;

                $(this).children('.ui-slider-handle').attr('href',' UI.val = ' + ui.value);

                //Show default/disabled/out of bounds state
                if ( ui.value > 0 && ui.value < 201 ) { //if in the valid slide rang
                    $(this).children('.ui-slider-handle').addClass('is-active');
                }
                else {
                    $(this).children('.ui-slider-handle').removeClass('is-active');
                }

                //Calculate slider's path on circle, put it there, by setting background-position
                if ( ui.value >= 0 && ui.value <= 200 ) { //if in valid range, these are one inside the min and max
                    var X = Math.sqrt((R*R) - (Y*Y)); //X^2 + Y^2 = R^2. Find X.
                    if ( X == 'NaN' ) {
                        percentLeft = 0;
                    }
                    else {
                        percentLeft = X;
                    }
                }
                else if ( ui.value == -1 || ui.value == 201 ) {
                    percentLeft = 0;
                    skip = true;
                }
                else {
                    percentLeft = 0;
                }

                //Move handle
                if ( percentLeft > 100 ) { percentLeft = 100; }
                $(this).children('.ui-slider-handle').css('background-position',percentLeft +'% 100%'); //set css sprite

                //Figure out and set input value
                if ( skip == true ) {
                    submitValue = 'keine Seite';
                    $(this).children('.ui-slider-handle').css('background-position',percentLeft +'% 0%'); //reset css sprite
                }
                else {
                    submitValue = Math.round(ui.value / 2); //Clamp input value to range 0 - 100
                }
                $('#display-only input').val(submitValue); //display selected value, demo only
                $('#slider-display').text(submitValue); //display selected value, demo only
                $(this).prev('.slider-input').val(ui.value); //Set actual input field val. jQuery UI hid it for us, but it will be submitted.
            }
        });
    });
});

Изображение для слайдера также должно поворачиваться на 360 градусов.

Answer 1

Я думаю, jQuery roundSlider Плагин подходит для этого требования.

Для более подробной информации смотрите демонстрации и документацию стр.

Answer 2

Для вычисления круга вы можете использовать следующую формулу.

precenttop = (-(cos(ui.value/(100/pi))-1))*50)
percentleft = (sin(ui.value/(100/pi))*50)+50

Затем он должен вращаться по кругу. Значение 201 fo ui будет в том же положении, что и 1, а -1 равно 199.

Объяснение вышесказанного:

cos(ui.value/(100/pi)) <-- ui value ranges from 0 to 200 but the cosine 
                           period is 2pi so devide the ui value so its 
                           somewhere between 0 and 2pi
-1                     <-- result ranges from 1 to -1 and i prefer 0 to 2 so 
                           minus 1 makes it 0 to -2 therefore
-()                    <-- we invert the whole... now it 0 to 2
*50                    <-- since you are using percent 0*50 = 0 and 2*50 = 100
                           ergo it now bounces between 0 and 100.

Для греха это почти то же самое, за исключением того, что мы хотим, чтобы результат был между -1 и 1. Мы просто умножаем на 50 (от -50 до 50) и добавляем 50 (0 - 100).

Теперь результат для значения ui.value, равного 0 процентам сверху, будет равен 0, а процентам лева будет равно 50. И при

ui.value = 100 50  150 200
top =      100 50  50  0
left =     50  100 0   50

Ergo: круг.