Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
0 / 0 / 0
Регистрация: 28.06.2017
Сообщений: 33
1

Слайдер с круговой диаграммой

11.01.2021, 14:36. Просмотров 742. Ответов 0

Добрый день.
Сейчас есть слайдер с круговой диаграммой. Код:
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
                <div class="slider-section--slider">
                    <div class="iphone">
                        <div style="display: flex; justify-content: center; position:relative;"> 
                            <img style="position: absolute;z-index: 1;" src="../img/iPhone-X-new-2.png">
                            <svg class="radial-progress" data-percentage="82" viewBox="0 0 80 80">
                                <circle class="incomplete" cx="40" cy="40" r="35"></circle>
                                <circle class="complete" cx="40" cy="40" r="35"></circle>
                                <text class="percentage" x="50%" y="57%" transform="matrix(0, 1, -1, 0, 80, 0)">82%</text>
                            </svg> 
                        </div>
                    </div>
                    <section class="regular slider">
                        <div>
                            <img src="../img/slider/image.jpg">
                        </div>
                        <div>
                            <img src="../img/slider/image.jpg">
                        </div>
                        <div>
                            <img src="../img/slider/image.jpg">
                        </div>
                        <div>
                            <img src="../img/slider/image.jpg">
                        </div>
                        <div>
                            <img src="../img/slider/image.jpg">
                        </div>
                        <div>
                            <img src="../img/slider/image.jpg">
                        </div>
                      </section>
                </div>
Работа диаграммы на js:
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
$(function(){
 
    // Remove svg.radial-progress .complete inline styling
    $('svg.radial-progress').each(function( index, value ) { 
        $(this).find($('circle.complete')).removeAttr( 'style' );
    });
 
    // Activate progress animation on scroll
    $(window).scroll(function(){
        $('svg.radial-progress').each(function( index, value ) { 
            // If svg.radial-progress is approximately 25% vertically into the window when scrolling from the top or the bottom
            if ( 
                $(window).scrollTop() > $(this).offset().top - ($(window).height() * 0.75) &&
                $(window).scrollTop() < $(this).offset().top + $(this).height() - ($(window).height() * 0.25)
            ) {
                // Get percentage of progress
                percent = $(value).data('percentage');
                // Get radius of the svg's circle.complete
                radius = $(this).find($('circle.complete')).attr('r');
                // Get circumference (2πr)
                circumference = 2 * Math.PI * radius;
                // Get stroke-dashoffset value based on the percentage of the circumference
                strokeDashOffset = circumference - ((percent * circumference) / 100);
                // Transition progress for 1.25 seconds
                $(this).find($('circle.complete')).animate({'stroke-dashoffset': strokeDashOffset}, 1250);
            }
        });
    }).trigger('scroll');
 
});
Сейчас диаграмма одна для всех слайдов и срабатывает она при скролле. Как сделать так, чтобы круг с диаграммой остался на прежнем месте, а сами проценты в text были у каждого слайда свои и при смене слайдов диаграмма меняла значение?
Скрин слайдера прикрепляю ниже.
0
Миниатюры
Слайдер с круговой диаграммой  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
11.01.2021, 14:36
Ответы с готовыми решениями:

слайдер по круговой, реально ли написать?
во общем пришел ко мнения что нужно писать круговую функцию на основе прямой работы со стилями...

Построение отчета с круговой диаграммой в БД без нормализации
Всем добрый день! Столкнулась с проблемой, по форуму подобной проблемы не нашла. Есть БД. Схема: ...

Круговой слайдер
Необходимо добавить на круговой слайдер изображения в формате пнг, вместо красных блоков. По идеи...

Какая разница между диаграммой классов и Entity Relationship диаграммой?
Какая разница между диаграммой классов и диаграммой сущность-связь?

0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
11.01.2021, 14:36

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Работа с диаграммой
Суть проблемы такова у меня есть диаграмма, которая строится на основании вносимых данных. и есть...

работа с диаграммой
На диаграмме построен график функций. Выглядит как много пересекающихся прямых. Из этих пересечений...

Работа с диаграммой
Здраствуйте. Вот какое задание: Разработать проект для ввода данных о стоимости бензина...

Работа с диаграммой 1С 8.2
Доброго времени суток пользователи форума! Недавно начал изучать 1С 8.2. На днях столкнулся с...

Значения ProgressBar диаграммой
Допустим есть три прогрессбара. Они работают так: procedure TForm1.Timer1Timer(Sender: TObject);...

Копирование листов с диаграммой
Не могу понять в чём дело, просит переименовать значение FYMont... А я её даже переменную такую...


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

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.