主页 / user-590470

Майя's questions

Martin Hope
Евгения
Asked: 2024-09-30 17:33:07 +0000 UTC
  • 8

现在有了这个结果，如何让这一切不断发生呢？我们需要图片朝不同的方向移动。

const imagesOne = [
    'assets/img/main-1.jpg',
    'assets/img/main-2.jpg',
    'assets/img/main-3.jpg'
];

const imagesTwo = [
    'assets/img/main-4.jpg',
    'assets/img/main-5.jpg',
    'assets/img/main-6.jpg'
];

const boxOne = document.querySelector('.ag_main-right_one');
const boxTwo = document.querySelector('.ag_main-right_two');

imagesOne.forEach(src => {
    const img = document.createElement('img');
    img.className = 'ag_main-right_img';
    img.src = src;
    img.alt = 'main';
    boxOne.appendChild(img);
});

imagesTwo.forEach(src => {
    const img = document.createElement('img');
    img.className = 'ag_main-right_img';
    img.src = src;
    img.alt = 'main';
    boxTwo.appendChild(img);
});
.ag_main-right {
    height: 700px;
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 574px;
}

.ag_main-right_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 25px;
    position: absolute;
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    -o-transition: transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
 /* Добавляем плавность перехода */
}

.ag_main-right_img {
    max-width: 277px;
    width: 100%;
    border-radius: 30px;
    -o-object-fit: cover;
    object-fit: cover;
}

.ag_main-right_one {
    left: 0;
    -webkit-animation: scrollDown 10s linear infinite;
    animation: scrollDown 10s linear infinite;
    top: 0;
}

.ag_main-right_two {
    right: 0;
    top: 0;
    -webkit-animation: scrollUp 10s linear infinite;
    animation: scrollUp 10s linear infinite;
}

@-webkit-keyframes scrollDown {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}

@keyframes scrollUp {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}
                    <div class="ag_main-right">
                        <div class="ag_main-right_box ag_main-right_one">
                            <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                            <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                            <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                            <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                            <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                            <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                        </div>
                        <div class="ag_main-right_box ag_main-right_two">
                            <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                                                        <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                                                                                    <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                                                                                                                <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                                                                                                                                            <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                                                                                                                                                                        <img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
                        </div>
                    </div>

javascript
Martin Hope
Евгения
Asked: 2024-08-23 21:37:56 +0000 UTC
  • 5

如何使分页正常显示应该是01 02 03 04 05 06 07 08 09 10等t,e 20 30 40

在此输入图像描述

var swiper = new Swiper(".mySwiper", {
      slidesPerView: 3,
      spaceBetween: 30,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    renderBullet: function (index, className) {
        return '<span class="' + className + '">' + "0" + (index + 1) + "</span>";
    },
  },
    });
.swiper {
      width: 100%;
      height: 500px
    }
    .swiper-wrapper{
    padding-bottom: 50px;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: red;
      height: 200px;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
.swiper-pagination-bullet {
    color: #18918a;
}
.swiper-pagination-bullet-active {
    color: #222;
}

.swiper-pagination-bullet-active::after {
    opacity: 1;
}
.swiper-pagination-bullet-active {
    padding-right: 82px;
    background-color: transparent;
    position: relative;
}
.swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 33px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 54px;
    border-bottom: 1px solid #fff;
    opacity: 0;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    transition: 0.5s all;
}
.swiper-pagination-bullet {
    font-size: 14px;
    line-height: 100%;
    font-family: "Onest-Regular";
    background-color: transparent !important;
    opacity: 1;
    height: 14px;
    position: relative;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    transition: 0.5s all;
    width: 10px;
    z-index: 10;
}
.common-pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 8px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    top: 0 !important;
}
<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
      <div class="swiper-slide">Slide 11</div>
    </div>
    <div class="swiper-pagination common-pagination"></div>
  </div>

javascript
Martin Hope
Майя
Asked: 2024-08-21 23:12:09 +0000 UTC
  • 5

您需要删除可见幻灯片中最后一个元素的右边框，如何执行此操作？

document.querySelectorAll('.swiper-common').forEach(el => {
    let swiper = new Swiper(el, {
    slidesPerView: 4,
    loop: true,
    pagination: {
      el: el.querySelector('.common-pagination'),
      clickable: true,
      renderBullet: function (index, className) {
          return '<span class="' + className + '">' + "0" + (index + 1) + "</span>";
      },
    },
     navigation: {
        nextEl: el.querySelector('.common-next'),
        prevEl: el.querySelector('.common-prev')
     }
});
});
.swiper {
    overflow-x: clip !important;
    overflow: visible;
    position: relative;
}

.common-pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 8px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    bottom: 0 !important;
}

.common-pagination .swiper-pagination-bullet {
    font-size: 14px;
    line-height: 100%;
    font-family: "Onest-Regular";
    background-color: transparent;
    opacity: 1;
    height: 14px;
    position: relative;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    transition: 0.5s all;
}

.common-pagination .swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 33px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 54px;
    border-bottom: 1px solid #fff;
    opacity: 0;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    transition: 0.5s all;
}

.common-pagination .swiper-pagination-bullet-active {
    padding-right: 82px;
    background-color: transparent;
    position: relative;
}

.common-pagination .swiper-pagination-bullet-active::after {
    opacity: 1;
}

.common-pagination .swiper-pagination-bullet-active:last-child {
    padding-right: 0;
    padding-left: 82px;
}

.common-pagination .swiper-pagination-bullet:last-child::after {
    left: auto;
    right: 19px;
}

.pre-trial_pagination .swiper-pagination-bullet {
    color: #18918a;
}

.pre-trial_pagination .swiper-pagination-bullet-active {
    color: #fff;
}

.arrows__container {
    position: absolute;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 30px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    right: 0;
}

.common-prev,
.common-next {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    min-height: 50px;
    min-width: 50px;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    transition: 0.5s all;
    z-index: 10;
    cursor: pointer;
}

.common-arrow {
    width: 24px;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
    min-width: 24px;
    min-height: 24px;
}

.light {
    background: #18918a;
}

.pre-trial .pre-trial_pagination {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -50px !important;
}

.pre-trial .arrows__container {
    top: -115px;
}

@media (hover: hover) {
    .common-prev:hover,
  .common-next:hover {
        background: #00786a;
    }
}
.pre-trial {
    background: #173b43;
    padding-top: 80px;
}

.pre-trial__top-titel {
    padding-top: 8px;
    display: block;
}

.pre-trial__top-text {
    padding-top: 24px;
    max-width: 485px;
}

.pre-trial__bottom {
    padding-bottom: 86px;
}

.pre-trial__swiper {
    margin-top: 64px;
    border-top: 1px solid #18918a;
    border-bottom: 1px solid #18918a;
}

.pre-trial__slide {
    padding: 36px 16px 24px 24px;
    border-right: 1px solid #18918a;
    -webkit-transition: all linear 0.5s;
    -o-transition: all linear 0.5s;
    transition: all linear 0.5s;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 100%;
    min-height: 420px;
}

.pre-trial__slide-top {
    gap: 8px;
}

.pre-trial__slide-two {
    max-width: 292px;
    padding: 24px 0 44px;
}

.pre-trial__slide-flex {
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid #18918a;
    width: 100%;
}

.pre-trial__slide-flex_two {
    padding-top: 12px;
}

.pre-trial__slide-conainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    width: 100%;
    padding-top: 24px;
}

.pre-trial__slide-conainer_column {
    gap: 12px;
}

.pre-trial__slide-conainer_column-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 6px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 284px;
}

.pre-trial__slide-conainer_btn {
    min-width: 32px;
    width: 32px;
    height: 32px;
}

.pre-trial__slide-conainer_column,
.pre-trial__slide-top,
.pre-trial__slide-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

@media (hover: hover) {
    .pre-trial__slide:hover {
        background: #18918a;
    }
}
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet"/>
    <section class="pre-trial">
        <div class="container">
            <div class="pre-trial__top">
                <p class="text-or-24-16 color-white">
                    Адвокаты бюро «Деловой фарватер» решают
                </p>
                <h2 class="pre-trial__top-titel text-om-white-42-36-26">
                    90% дел в досудебном порядке
                </h2>
                <p class="pre-trial__top-text text-or-16 color-white">
                    Из них 98% заканчиваются минимальными последствиями или отказом в возбуждении уголовного дела.
                </p>
            </div>
            <div class="pre-trial__bottom">
                <div class="swiper pre-trial__swiper swiper-common">
                    <div class="swiper-wrapper pre-trial__wrapper">
                        <div class="swiper-slide">
                            <a class="pre-trial__slide">
                                <div class="pre-trial__slide-top">
                                    <p class="text-or-18-16 color-white">
                                        Сумма взыскания уменьшена
                                    </p>
                                    <p class="text-om-black-36-26 color-white">
                                        на 96 000 000 р.
                                    </p>
                                </div>
                                <p class="pre-trial__slide-two text-or-16-14 color-white">
                                    А также устранен риск привлечения к уголовной ответственности
                                </p>
                                <div>
                                    <div class="pre-trial__slide-flex">
                                        <p class="text-or-14 color-white">
                                            Отрасль
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Производство пластиковых изделий
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-flex pre-trial__slide-flex_two">
                                        <p class="text-or-14 color-white">
                                            Стартовая точка
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Акт выездной налоговой проверки
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-conainer">
                                        <div class="pre-trial__slide-conainer_column">
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    128 000 000 р.
                                                </p>
                                            </div>
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    29 000 000 р.
                                                </p>
                                            </div>
                                        </div>
                                        <div class="pre-trial__slide-conainer_btn">
                                            <div href="#" class="btn-circle">
                                                <img class="btn-circle_arrow" src="assets/img/Arrow_Left_MD.png" alt="arrow">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a class="pre-trial__slide">
                                <div class="pre-trial__slide-top">
                                    <p class="text-or-18-16 color-white">
                                        Сумма взыскания уменьшена
                                    </p>
                                    <p class="text-om-black-36-26 color-white">
                                        на 206 000 000 р.
                                    </p>
                                </div>
                                <p class="pre-trial__slide-two text-or-16-14 color-white">
                                    Клиенты не помещены в СИЗО, находятся на свободе
                                </p>
                                <div>
                                    <div class="pre-trial__slide-flex">
                                        <p class="text-or-14 color-white">
                                            Отрасль
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Промышленность
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-flex pre-trial__slide-flex_two">
                                        <p class="text-or-14 color-white">
                                            Стартовая точка
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Акт выездной налоговой проверки
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-conainer">
                                        <div class="pre-trial__slide-conainer_column">
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    315 000 000 р.
                                                </p>
                                            </div>
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    109 000 000 р.
                                                </p>
                                            </div>
                                        </div>
                                        <div class="pre-trial__slide-conainer_btn">
                                            <div href="#" class="btn-circle">
                                                <img class="btn-circle_arrow" src="assets/img/Arrow_Left_MD.png" alt="arrow">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a class="pre-trial__slide">
                                <div class="pre-trial__slide-top">
                                    <p class="text-or-18-16 color-white">
                                        Сумма взыскания уменьшена
                                    </p>
                                    <p class="text-om-black-36-26 color-white">
                                        101 000 000 р.
                                    </p>
                                </div>
                                <div>
                                    <div class="pre-trial__slide-flex">
                                        <p class="text-or-14 color-white">
                                            Отрасль
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Производство и продажа кондитерских изделий
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-flex pre-trial__slide-flex_two">
                                        <p class="text-or-14 color-white">
                                            Стартовая точка
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Акт выездной налоговой проверки
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-conainer">
                                        <div class="pre-trial__slide-conainer_column">
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    128 000 000 р.
                                                </p>
                                            </div>
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    29 000 000 р.
                                                </p>
                                            </div>
                                        </div>
                                        <div class="pre-trial__slide-conainer_btn">
                                            <div href="#" class="btn-circle">
                                                <img class="btn-circle_arrow" src="assets/img/Arrow_Left_MD.png" alt="arrow">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a class="pre-trial__slide">
                                <div class="pre-trial__slide-top">
                                    <p class="text-or-18-16 color-white">
                                        Сумма взыскания уменьшена
                                    </p>
                                    <p class="text-om-black-36-26 color-white">
                                        106 000 000 р.
                                    </p>
                                </div>
                                <div>
                                    <div class="pre-trial__slide-flex">
                                        <p class="text-or-14 color-white">
                                            Отрасль
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Производство и продажа строительных материалов
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-flex pre-trial__slide-flex_two">
                                        <p class="text-or-14 color-white">
                                            Стартовая точка
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Акт выездной налоговой проверки
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-conainer">
                                        <div class="pre-trial__slide-conainer_column">
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    118 000 000 р.
                                                </p>
                                            </div>
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    12 000 000 р.
                                                </p>
                                            </div>
                                        </div>
                                        <div class="pre-trial__slide-conainer_btn">
                                            <div href="#" class="btn-circle">
                                                <img class="btn-circle_arrow" src="assets/img/Arrow_Left_MD.png" alt="arrow">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a class="pre-trial__slide">
                                <div class="pre-trial__slide-top">
                                    <p class="text-or-18-16 color-white">
                                        Сумма взыскания уменьшена
                                    </p>
                                    <p class="text-om-black-36-26 color-white">
                                        101 000 000 р.
                                    </p>
                                </div>
                                <div>
                                    <div class="pre-trial__slide-flex">
                                        <p class="text-or-14 color-white">
                                            Отрасль
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Производство и продажа кондитерских изделий
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-flex pre-trial__slide-flex_two">
                                        <p class="text-or-14 color-white">
                                            Стартовая точка
                                        </p>
                                        <p class="text-or-14 color-white">
                                            Акт выездной налоговой проверки
                                        </p>
                                    </div>
                                    <div class="pre-trial__slide-conainer">
                                        <div class="pre-trial__slide-conainer_column">
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    128 000 000 р.
                                                </p>
                                            </div>
                                            <div class="pre-trial__slide-conainer_column-inner">
                                                <p class="text-or-14 color-white">
                                                    Сумма претензий:
                                                </p>
                                                <p class="text-or-14 color-white">
                                                    29 000 000 р.
                                                </p>
                                            </div>
                                        </div>
                                        <div class="pre-trial__slide-conainer_btn">
                                            <div href="#" class="btn-circle">
                                                <img class="btn-circle_arrow" src="assets/img/Arrow_Left_MD.png" alt="arrow">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="pre-trial_pagination common-pagination"></div>
                    
                    <div class="arrows__container">
                        <div class="pre-trial-prev common-prev light">
                            <img class="common-arrow" src="assets/img/arrow-left.png" alt="arrow">
                        </div>
                        <div class="pre-trial-next common-next light">
                            <img class="common-arrow" src="assets/img/arrow-right.png" alt="arrow">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

javascript
Martin Hope
Майя
Asked: 2024-08-04 21:37:37 +0000 UTC
  • 5

我无法打开手风琴的第一个元素，以便稍后在单击时将其关闭等。

const accordions = document.querySelectorAll(".accordion");

if(accordions) {
    const openAccordion = (accordion) => {
        const content = accordion.querySelector(".accordion__content");
        accordion.classList.add("open");
        content.style.maxHeight = content.scrollHeight + "px";
    };
    
    const closeAccordion = (accordion) => {
        const content = accordion.querySelector(".accordion__content");
        accordion.classList.remove("open");
        content.style.maxHeight = null;
    };
    
    accordions.forEach((accordion) => {
        const intro = accordion.querySelector(".accordion__control");
        const content = accordion.querySelector(".accordion__content");
    
        intro.onclick = () => {
            if (content.style.maxHeight) {
                closeAccordion(accordion);
            } else {
                accordions.forEach((accordion) => closeAccordion(accordion));
                openAccordion(accordion);
            }
        };
    });
}
.accordion__content {
    max-height: 0;
    overflow: hidden;
    will-change: max-height;
    -webkit-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    
}
                <ul class="">
                    <li class="accordion">
                        <button class="accordion__control" aria-expanded="false">
                            кнопка
                        </button>
                        <div class="accordion__content" aria-hidden="true">
                            <div class="">
                                контент
                            </div>
                        </div>
                    </li>
                    <li class="accordion">
                        <button class="accordion__control" aria-expanded="false">
                            кнопка
                        </button>
                        <div class="accordion__content" aria-hidden="true">
                            <div class="">
                                контент
                            </div>
                        </div>
                    </li>
                </ul>

javascript
Martin Hope
Майя
Asked: 2024-08-04 19:50:50 +0000 UTC
  • 5

如何在单击另一个文本时隐藏元素外部的文本？

const box = document.querySelector('.team__box');
const boxInner = box.querySelectorAll('.team__box-slide');

boxInner.forEach((item) => {
  const content = item.querySelector('.team__box-slide_descr-definition');

  const height = content.scrollHeight;

  item.addEventListener('click', () => {
    content.style.height = height + 'px';
  })
})
.team__box-slide_descr-definition {
    height: 0;
    transition: .3s all;
    overflow: hidden;
}
<div class="team__box">
    <div class="team__box-slide">
        Открыть текст
        <div class="team__box-slide_descr-definition">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus harum molestias provident amet ab, nam neque necessitatibus consequatur dicta qui veniam, placeat magnam dignissimos sunt veritatis eveniet laborum facilis! Iusto.
        </div>
    </div>
    <div class="team__box-slide">
        Открыть текст
        <div class="team__box-slide_descr-definition">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus harum molestias provident amet ab, nam neque necessitatibus consequatur dicta qui veniam, placeat magnam dignissimos sunt veritatis eveniet laborum facilis! Iusto.
        </div>
    </div>
    <div class="team__box-slide">
        Открыть текст
        <div class="team__box-slide_descr-definition">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus harum molestias provident amet ab, nam neque necessitatibus consequatur dicta qui veniam, placeat magnam dignissimos sunt veritatis eveniet laborum facilis! Iusto.
        </div>
    </div>
</div>

javascript
Martin Hope
Майя
Asked: 2024-07-30 14:16:20 +0000 UTC
  • 5

如何减少分页

document.querySelectorAll('.events__swiper').forEach(el => {
    let swiper = new Swiper(el, {

    loop: true,
    pagination: {
      el: el.querySelector('.events-pagination'),
      clickable: true
    },
     navigation: {
        nextEl: el.querySelector('.events-next'),
        prevEl: el.querySelector('.events-prev')
     }

    });
});
.swiper-slide img {
    max-width: 400px;
}
<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
                        <div class="swiper events__swiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                                                      <img src="https://get.wallhere.com/photo/3840x2160-px-mountain-1327909.jpg" alt="wdsd">
                                </div>
                                <div class="swiper-slide">
                                                                    <img src="https://get.wallhere.com/photo/3840x2160-px-mountain-1327909.jpg" alt="wdsd"></div>
                                <div class="swiper-slide">
                                                                    <img src="https://get.wallhere.com/photo/3840x2160-px-mountain-1327909.jpg" alt="wdsd"></div>
                            </div>
                                                            <div class="swiper-slide">
                                                                    <img src="https://get.wallhere.com/photo/3840x2160-px-mountain-1327909.jpg" alt="wdsd"></div>
                            </div>
                            <div class="events-pagination"></div>
                          
                            <div class="events-prev"></div>
                            <div class="events-next"></div>
                          
                        </div>

在此输入图像描述

javascript
Martin Hope
Майя
Asked: 2024-07-29 18:17:42 +0000 UTC
  • 7

如何在css中制作这样的三角形？

在此输入图像描述

.header__wrapper-nav_list-inner_wrapper {
    position: relative;
    border-radius: 25px;
    max-width: 156px;
    width: 100%;
    padding: 20px 24px 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    background-color: rgba(10, 40, 107, 0.05);
    list-style: none;
}

.header__wrapper-nav_list-inner_wrapper::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 9px solid #fcf921;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-radius: 25px;
    top: 0;
    right: 19px;
}
                        <ul class="header__wrapper-nav_list-inner_menu">
                            <div class="header__wrapper-nav_list-inner_wrapper">
                                <li class="header__wrapper-nav_list-inner_menu-item">
                                    <a href="#" class="header__wrapper-nav_list-inner_menu-link text-gr-16-14">
                                        Предстоящие
                                    </a>
                                </li>
                                <li class="header__wrapper-nav_list-inner_menu-item">
                                    <a class="header__wrapper-nav_list-inner_menu-link text-gr-16-14" href="#">
                                        Прошедшие
                                    </a>
                                </li>
                            </div>
                        </ul>

css
Martin Hope
Майя
Asked: 2024-07-16 16:50:57 +0000 UTC
  • 5

有标签过滤，但是当您单击按钮时它不会缩放到该标签，如何实现？

const categoriesData = {
  category1: [{
      lat: 53.442131071027305,
      lon: 58.99983849999995,
      name: 'Северный переход, 20а1',
      caption: 'Северный переход, 20а',
    },
  ],
  category2: [{
      lat: 53.426321310730245,
      lon: 58.9609671588954,
      name: 'ул. Советская, 20а',
      caption: 'ул. Советская, 20а'
    },
  ],
  category3: [{
      lat: 53.35935432593927,
      lon: 59.007853228836,
      name: 'ул. Коробова, 20',
      caption: 'ул. Коробова, 20'
    },
  ],
};

const init = () => {
  const map = new ymaps.Map('YMapsID-1', {
    center: [53.442131071027305,58.99983849999995],
    zoom: 14,
  });

  let activeCategory = "category1";

  const showCategory = (category) => {
    map.geoObjects.removeAll();

    categoriesData[category].forEach((item) => {
      const placemark = new ymaps.Placemark([item.lat, item.lon], {
        iconColor: '#1d79d3',
        hintContent: item.name,
        balloonContent: item.name,
        iconCaption: item.caption,
      });
      
      map.geoObjects.add(placemark);
    });

    activeCategory = category;
  }

  const categoryButtons = document.querySelectorAll('.category-button');
  categoryButtons.forEach((button) => {
    button.addEventListener('click', (e) => {
      const category = e.currentTarget.dataset.category;
      showCategory(category);
    });
  });

  showCategory(activeCategory);
};

ymaps.ready(init);
<!DOCTYPE html>
<html lang="en">
<head>

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
</head>
<body>

<!-- Создаём контейнер для карты -->
  <div class="container">
  <div class="container__wrapper">
          <button class=" category-button" data-category="category1">
            <p>Северный переход, 20а</p>
          </button>
          <button class=" category-button" data-category="category2">
            <p>ул. Советская, 20а</p>
          </button>
          <button class=" category-button" data-category="category3">
            <p>ул. Коробова, 20</p>
          </button>
  </div>


  <div id="YMapsID-1" style="width: 500px; height: 400px"></div>
  </div>

javascript
Martin Hope
Майя
Asked: 2024-07-11 22:32:58 +0000 UTC
  • 5

我怎样才能编写这段代码，这样我就不必每次都编写新函数来显示更多按钮？

const showMore = document.querySelector('.btn-download');
const btnReviews = document.querySelectorAll('.reviews_btn');
const cards = document.querySelectorAll('.glass__container-card').length;
const cardsReviews = document.querySelectorAll('.reviews__wrapper-photo').length;
let items = 8;

  showMore.addEventListener('click', () => {
    items += 8; // сколько карточек открывается
    const array = Array.from(document.querySelector('.glass__container').children);
    const visItems = array.slice(0 , items);
    visItems.forEach(el => el.classList.add('is-visible'));
      
    if(visItems.length === cards) {
      showMore.style.display = 'none';
    }
  });

  btnReviews.addEventListener('click', () => {
    items += 8; // сколько карточек открывается
    const arrayReviews = Array.from(document.querySelector('.reviews__wrapper').children);
    const visItemsReviews = arrayReviews.slice(0 , items);

    visItemsReviews.forEach(el => el.classList.add('is-visible'));
      
    if(visItemsReviews.length === cardsReviews) {
      btnReviews.style.display = 'none';
    }
  });
.reviews__wrapper-photo:nth-child(n+5) {
    display: none;
}
.reviews__wrapper-photo.is-visible {
    display: block;
}
.glass__container-card:nth-child(n+5) {
    display: none;
}
.glass__container-card.is-visible {
    display: block;
}
 <div class="reviews__wrapper">
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
                <a class="reviews__wrapper-photo">
                    lorem
                </a>
            </div>
     <div class="reviews_btn">
       <button>
           Показать ещё
      </button>
</div> 

 <div class="glass__wrapper">
                <a class="glass__container-card">
                    lorem
                </a>
                <a class="glass__container-card">
                    lorem
                </a>
                <a class="glass__container-card">
                    lorem
                </a>
                <a class="glass__container-card">
                    lorem
                </a>
                <a class="glass__container-card">
                    lorem
                </a>
                <a class="glass__container-card">
                    lorem
                </a>
                <a class="glass__container-card">
                    lorem
                </a>
            </div>
     <div class="btn-download">
       <button>
           Показать ещё
      </button>
</div>

javascript
Martin Hope
Майя
Asked: 2024-07-11 00:43:24 +0000 UTC
  • 5

前后滑块有很多，需要确保它们没有被调用通过

new BeforeAfter({
  id: '#one'
}); 
new BeforeAfter({
  id: '#two'
});
new BeforeAfter({
  id: '#two'
});

但总的来说，提前致谢

这是代码

class BeforeAfter {
  constructor(enteryObject) {

      const beforeAfterContainer = document.querySelector(enteryObject.id);
      const before = beforeAfterContainer.querySelector('.bal-before');
      const beforeText = beforeAfterContainer.querySelector('.bal-beforePosition');
      const afterText = beforeAfterContainer.querySelector('.bal-afterPosition');
      const handle = beforeAfterContainer.querySelector('.bal-handle');
      var widthChange = 0;

      beforeAfterContainer.querySelector('.bal-before-inset').setAttribute("style", "width: " + beforeAfterContainer.offsetWidth + "px;")
      window.onresize = function () {
          beforeAfterContainer.querySelector('.bal-before-inset').setAttribute("style", "width: " + beforeAfterContainer.offsetWidth + "px;")
      }
      before.setAttribute('style', "width: 50%;");
      handle.setAttribute('style', "left: 50%;");

      //touch screen event listener
      beforeAfterContainer.addEventListener("touchstart", (e) => {

          beforeAfterContainer.addEventListener("touchmove", (e2) => {
              let containerWidth = beforeAfterContainer.offsetWidth;
              let currentPoint = e2.changedTouches[0].clientX;

              let startOfDiv = beforeAfterContainer.offsetLeft;

              let modifiedCurrentPoint = currentPoint - startOfDiv;

              if (modifiedCurrentPoint > 10 && modifiedCurrentPoint < beforeAfterContainer.offsetWidth - 10) {
                  let newWidth = modifiedCurrentPoint * 100 / containerWidth;

                  before.setAttribute('style', "width:" + newWidth + "%;");
                  afterText.setAttribute('style', "z-index: 1;");
                  handle.setAttribute('style', "left:" + newWidth + "%;");
              }
          });
      });

      //mouse move event listener
      beforeAfterContainer.addEventListener('mousemove', (e) => {
          let containerWidth = beforeAfterContainer.offsetWidth;
          widthChange = e.offsetX;
          let newWidth = widthChange * 100 / containerWidth;

          if (e.offsetX > 10 && e.offsetX < beforeAfterContainer.offsetWidth - 10) {
              before.setAttribute('style', "width:" + newWidth + "%;");
              afterText.setAttribute('style', "z-index:" + "1;");
              handle.setAttribute('style', "left:" + newWidth + "%;");
          }
      })

  }
}

new BeforeAfter({
  id: '#one'
});
new BeforeAfter({
  id: '#two'
});
new BeforeAfter({
  id: '#two'
});
.bal-container {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: grab;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.bal-after {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bal-before {
    display: block;
    position: absolute;
    top: 0;
    /* right: 0; */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    overflow: hidden;
}

.bal-before-inset {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.bal-after img,
.bal-before img {
    object-fit: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    object-position: 50% 50%;
    top: 0;
    bottom: 0;
    left: 0;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.bal-beforePosition {
    background: #121212;
    color: #fff;
    left: 0;
    pointer-events: none;
    border-radius: 0.2rem;
    padding: 2px 10px;
}

.bal-afterPosition {
    background: #121212;
    color: #fff;
    right: 0;
    pointer-events: none;
    border-radius: 0.2rem;
    padding: 2px 10px;
}

.beforeLabel {
    position: absolute;
    bottom: 0;
    margin: 1rem;
    font-size: 1em;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.afterLabel {
    position: absolute;
    bottom: 0;
    margin: 1rem;
    font-size: 1em;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}


/* handle and arrow */

.bal-handle {
    height: 41px;
    width: 41px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -21px;
    border: 2px solid #fff;
    border-radius: 1000px;
    z-index: 20;
    pointer-events: none;
    box-shadow: 0 0 10px rgb(12, 12, 12);
}

.handle-left-arrow,
.handle-right-arrow {
    width: 0;
    height: 0;
    border: 6px inset transparent;
    position: absolute;
    top: 50%;
    margin-top: -6px;
}

.handle-left-arrow {
    border-right: 6px solid #fff;
    left: 50%;
    margin-left: -17px;
}

.handle-right-arrow {
    border-left: 6px solid #fff;
    right: 50%;
    margin-right: -17px;
}

.bal-handle::before {
    bottom: 50%;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgb(12, 12, 12);
}

.bal-handle::after {
    top: 50%;
    margin-top: 20.5px;
    box-shadow: 0 0 5px rgb(12, 12, 12);
}

.bal-handle::before,
.bal-handle::after {
    content: " ";
    display: block;
    width: 2px;
    background: #fff;
    height: 9999px;
    position: absolute;
    left: 50%;
    margin-left: -1.5px;
}
    <div class="mainSection">
    
        <div id="one" class="bal-container">
            <div class="bal-after">
                <img src="https://img1.fonwall.ru/o/qc/animal-pet-cat-mammal.jpeg?auto=compress&amp;fit=resize&amp;w=1200&amp;display=large">
                <div class="bal-afterPosition afterLabel">
                    After
                </div>
            </div>
    
            <div class="bal-before">
                <div class="bal-before-inset">
                    <img src="https://w-dog.ru/wallpapers/5/18/289291145046987/evropejskaya-koshka-dikij-kot-morda-vzglyad.jpg">
                    <div class="bal-beforePosition beforeLabel">
                        Before
                    </div>
                </div>
            </div>
    
            <div class="bal-handle">
                <span class=" handle-left-arrow"></span>
                <span class="handle-right-arrow"></span>
            </div>
    
        </div>
    
        <div id="two" class="bal-container">
            <div class="bal-after">
                <img src="https://img1.fonwall.ru/o/qc/animal-pet-cat-mammal.jpeg?auto=compress&amp;fit=resize&amp;w=1200&amp;display=large">
                <div class="bal-afterPosition afterLabel">
                    After
                </div>
            </div>
            <div class="bal-before">
                <div class="bal-before-inset">
                    <img src="https://w-dog.ru/wallpapers/5/18/289291145046987/evropejskaya-koshka-dikij-kot-morda-vzglyad.jpg">
                    <div class="bal-beforePosition beforeLabel">
                        Before
                    </div>
    
                </div>
            </div>
            <div class="bal-handle">
                <span class="handle-left-arrow"></span>
                <span class="handle-right-arrow"></span>
    
            </div>
        </div>
    
        <div id="three" class="bal-container">
            <div class="bal-after">
                <img src="https://img1.fonwall.ru/o/qc/animal-pet-cat-mammal.jpeg?auto=compress&amp;fit=resize&amp;w=1200&amp;display=large">
                <div class="bal-afterPosition afterLabel">
                    After
                </div>
            </div>
            <div class="bal-before">
                <div class="bal-before-inset">
                    <img src="https://w-dog.ru/wallpapers/5/18/289291145046987/evropejskaya-koshka-dikij-kot-morda-vzglyad.jpg">
                    <div class="bal-beforePosition beforeLabel">
                        Before
                    </div>
    
                </div>
            </div>
            <div class="bal-handle">
                <span class="handle-left-arrow"></span>
                <span class="handle-right-arrow"></span>
    
            </div>
        </div>
    </div>

javascript
Martin Hope
Майя
Asked: 2024-07-04 14:44:34 +0000 UTC
  • 5

当鼠标悬停在块上时，需要通过 js 来实现按钮的平滑外观，通过网格不合适，也可以通过 css，只需要通过 js 提前感谢。 

.box__inner-btn {
  display: none;
}
.box__inner:hover .box__inner-btn {
  display: block;
}
                <div class="box">
                    <div class="box__inner">
                        <p class="box__inner-text">
                            Проектирование инженерных систем
                        </p>
                        <a href="#" class="box__inner-btn">
                                Подробнее
                        </a>
                    </div>
                    <div class="box__inner">
                        <p class="box__inner-text">
                            Проектирование инженерных систем
                        </p>
                        <a href="#" class="box__inner-btn">
                                Подробнее
                        </a>
                    </div>
                    <div class="box__inner">
                        <p class="box__inner-text">
                            Проектирование инженерных систем
                        </p>
                        <a href="#" class="box__inner-btn">
                                Подробнее
                        </a>
                    </div>
                    <div class="box__inner">
                        <p class="box__inner-text">
                            Проектирование инженерных систем
                        </p>
                        <a href="#" class="box__inner-btn">
                                Подробнее
                        </a>
                    </div>
                </div>

javascript
Martin Hope
Майя
Asked: 2024-06-14 02:19:43 +0000 UTC
  • 6

通过单击按钮，将显示隐藏的文本。需要通过js来实现。使用js裁剪文本。这样“更多”按钮就会变为“隐藏”

有一个代码示例，但现在不能正常工作

let textHolder = document.querySelector('.demo');
let fullText = textHolder.innerHTML;
let btn = document.querySelectorAll('.btns');
let textStatus = 'full';

function Truancate(textHolder, limit) {
  let txt = textHolder.innerHTML;
  if (txt.length > limit) {
    let newText = txt.substr(0, limit) + ' ...';
    textHolder.innerHTML = newText;
    textStatus = 'truncated';
  }
}

Truancate(textHolder, textHolder.offsetWidth / 3.39);

function toggleText() {
  if (textStatus === 'truncated') {
    textHolder.innerHTML = fullText;
    textStatus = 'full';
  } else {
    Truancate(textHolder, textHolder.offsetWidth / 3.32);
  }
}

btn.forEach((btns) => {
  btns.addEventListener('click', toggleText);
});
 <div class="box">
   <span class="demo" id="demo">Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу..Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу</span>
    <span class="btns">Еще</span>
</div>
<br>

 <div class="box">
   <span class="demo" id="demo">Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу..Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу</span>
    <span class="btns">Еще</span>
</div>

javascript
Martin Hope
Майя
Asked: 2024-04-23 17:37:18 +0000 UTC
  • 3

如何从计数器中删除这些逗号，你只需要做空格

class countUp {
  constructor(el) {
    this.el = el;
    this.setVars();
    this.init();
  }

  setVars() {
    this.number = this.el.querySelectorAll("[data-countup-number]");
    this.observerOptions = { root: null, rootMargin: "0px 0px", threshold: 0 };
    this.observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        const end = parseFloat(
          entry.target.dataset.countupNumber.replace(/,/g, "")
        );
        const decimals = this.countDecimals(end);
        if (entry.isIntersecting) {
          this.iterateValue(entry.target, end, decimals);
        }
      });
    }, this.observerOptions);
  }

  init() {
    if (this.number.length > 0) {
      this.number.forEach((el) => {
        this.observer.observe(el);
      });
    }
  }

  iterateValue(el, end, decimals) {
    const start = 0;
    const duration = 2500;
    let startTimestamp = null;

    const step = (timestamp) => {
      if (!startTimestamp) startTimestamp = timestamp;
      const elapsedPercent = (timestamp - startTimestamp) / duration;
      const easedProgress = Math.min(this.easeOutQuint(elapsedPercent), 1);
      let interimNumber = Math.abs(easedProgress * (end - start) + start);
      el.innerHTML = this.formatNumber(interimNumber, decimals);
      if (easedProgress < 1) {
        window.requestAnimationFrame(step);
      }
    };

    // requestAnimationFrame returns DOMHighResTimeStamp as a callback (used as timestamp)
    window.requestAnimationFrame(step);
  }

  easeOutQuad(x) {
    return 1 - Math.pow(1 - x, 3);
  }

  easeOutQuint(x) {
    return 1 - Math.pow(1 - x, 5);
  }

  countDecimals(val) {
    if (Math.floor(val) === val) return 0;
    return val.toString().split(".")[1].length || 0;
  }

  formatNumber(val, decimals) {
    return val.toLocaleString("en-US", {
      minimumFractionDigits: decimals,
      maximumFractionDigits: decimals
    });
  }
}

// Simplifed version of Viget dynamic modules to attach instances for this demo
// https://www.viget.com/articles/how-does-viget-javascript/
// You CAN use this pattern, but it's single purpose right now
const dataModules = [...document.querySelectorAll('[data-module="countup"]')];

dataModules.forEach((element) => {
  element.dataset.module.split(" ").forEach(function () {
    new countUp(element);
  });
});
<div data-module="countup">
  <div class="concept__wrapper_quantity-inner">
  <p data-countup-number="120000">120 000</p>
  </div>

  <div class="concept__wrapper_quantity-inner">
     <p data-countup-number="45000">45 000</p>
  </div>
</div

[![在此处输入图像描述][1]][1]如何不使用逗号而是使用空格分隔数字？

class countUp {
  constructor(el) {
    this.el = el;
    this.setVars();
    this.init();
  }

  setVars() {
    this.number = this.el.querySelectorAll("[data-countup-number]");
    this.observerOptions = { root: null, rootMargin: "0px 0px", threshold: 0 };
    this.observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        const end = parseFloat(
          entry.target.dataset.countupNumber.replace(/,/g, "")
        );
        const decimals = this.countDecimals(end);
        if (entry.isIntersecting) {
          this.iterateValue(entry.target, end, decimals);
        }
      });
    }, this.observerOptions);
  }

  init() {
    if (this.number.length > 0) {
      this.number.forEach((el) => {
        this.observer.observe(el);
      });
    }
  }

  iterateValue(el, end, decimals) {
    const start = 0;
    const duration = 2500;
    let startTimestamp = null;

    const step = (timestamp) => {
      if (!startTimestamp) startTimestamp = timestamp;
      const elapsedPercent = (timestamp - startTimestamp) / duration;
      const easedProgress = Math.min(this.easeOutQuint(elapsedPercent), 1);
      let interimNumber = Math.abs(easedProgress * (end - start) + start);
      el.innerHTML = this.formatNumber(interimNumber, decimals);
      if (easedProgress < 1) {
        window.requestAnimationFrame(step);
      }
    };

    // requestAnimationFrame returns DOMHighResTimeStamp as a callback (used as timestamp)
    window.requestAnimationFrame(step);
  }

  easeOutQuad(x) {
    return 1 - Math.pow(1 - x, 3);
  }

  easeOutQuint(x) {
    return 1 - Math.pow(1 - x, 5);
  }

  countDecimals(val) {
    if (Math.floor(val) === val) return 0;
    return val.toString().split(".")[1].length || 0;
  }

  formatNumber(val, decimals) {
    return val.toLocaleString("en-US", {
      minimumFractionDigits: decimals,
      maximumFractionDigits: decimals
    });
  }
}

// Simplifed version of Viget dynamic modules to attach instances for this demo
// https://www.viget.com/articles/how-does-viget-javascript/
// You CAN use this pattern, but it's single purpose right now
const dataModules = [...document.querySelectorAll('[data-module="countup"]')];

dataModules.forEach((element) => {
  element.dataset.module.split(" ").forEach(function () {
    new countUp(element);
  });
});

javascript
Martin Hope
Майя
Asked: 2024-04-18 15:34:47 +0000 UTC
  • 3

在此输入图像描述- 它应该是什么样子的图片如何在查看幻灯片时将活动类添加到分页，反之亦然，在倒回 Swiper 滑块时将其删除也许您可以以某种方式制作自定义进度条我将非常感谢编写一个函数这是我的代码

var swiper = new Swiper(".repair-calc_slider", {
navigation: {
  nextEl: ".repair-calc-next",
  prevEl: ".repair-calc-prev",
},
pagination: {
    el: ".repair-calc-pagination",
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + "</span>";
    },
  },

});

javascript