扇形切换

<div class="first-swiper">
    <div class="field-swiper swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="index-field items-center bg-cover relative section-content">
                    <div class="img"><img src="//cdn.myxypt.com/af5868ab/23/12/3737a662c46f28043238cd6eb8ab21c15265d19b.jpg" alt="自动化、智慧化、人性化控制"></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="index-field items-center bg-cover relative section-content">
                    <div class="img"><img src="//cdn.myxypt.com/af5868ab/23/12/3737a662c46f28043238cd6eb8ab21c15265d19b.jpg" alt="自动化、智慧化、人性化控制"></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="index-field items-center bg-cover relative section-content">
                    <div class="img"><img src="//cdn.myxypt.com/af5868ab/23/12/3737a662c46f28043238cd6eb8ab21c15265d19b.jpg" alt="自动化、智慧化、人性化控制"></div>
                </div>
            </div>
        </div>

        <nav class="field-nav">
            <div class="field-item sector sector1" data-img="//cdn.myxypt.com/af5868ab/23/12/da79ab41ddbcf89484077b407bb0865e2275e957.jpg" data-slide-index="0"></div>
            <div class="field-item sector sector2" data-img="//cdn.myxypt.com/af5868ab/23/12/da79ab41ddbcf89484077b407bb0865e2275e957.jpg" data-slide-index="1"></div>
            <div class="field-item sector sector3" data-img="//cdn.myxypt.com/af5868ab/23/12/da79ab41ddbcf89484077b407bb0865e2275e957.jpg" data-slide-index="2"></div>
        </nav>


    </div>
</div>




<script>
    // JavaScript部分，将data-img的值传递给自定义属性--bg-color
    const sectors = document.querySelectorAll('.sector');

    sectors.forEach(sector => {
        const imgUrl = sector.getAttribute('data-img');
        sector.style.setProperty('--bg-color', `url(${imgUrl})`);
    });
</script>


<script>
    var fieldSwiper = new Swiper('.field-swiper', {
          parallax: true,
          speed: 1000,
          autoplay: {
              disableOnInteraction: false,
              delay: 3000, //1秒切换一次
          },
          disableOnInteraction: false,
          pagination: {
              el: '.field-swiper .field-nav',
              type: 'custom'
          },
          on: {
              init: function() {
                  swiperAnimateCache(this); //隐藏动画元素
                  swiperAnimate(this); //初始化完成开始动画
              },
              slideChangeTransitionEnd: function() {
                  swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
              },
              slideChangeTransitionStart: function() {
                  $('.field-nav .field-item').eq(this.activeIndex).addClass('active').siblings().removeClass('active')
              },
          },
    });

    $('.field-nav .field-item').eq(0).addClass('active');

    $(".field-nav .field-item").click(function() {
       $('.field-nav .field-item').removeClass('active'); 
       $(this).addClass('active'); 

       var slideIndex = $(this).data('slide-index');
       fieldSwiper.slideTo(slideIndex, 800, false);
    });
      
</script>

/* banner */
.first-swiper .aa .swiper-slide{position: relative;}
.first-swiper .aa .swiper-slide .img img{width:100%;display:block;}
.first-swiper .aa .swiper-slide .det{width:100%;position:absolute;left:0;top: 50%;transform: translateY(-50%);}
.first-swiper .aa .swiper-slide .wz{background:url(//cdn.myxypt.com/af5868ab/23/12/bffddbc1b73f5fb5c9db18a16a688c77265e5189.png) no-repeat;background-size:100% 100%;width:44.94%;}
.first-swiper .aa .swiper-slide .wz .nr{padding:3vw 2vw;}
.index-field .index-field-title{font-size: 48px;color: #333;}
.index-field .index-section-title{color: #666;font-size:18px;line-height:32px;width:88%;margin:0.5vw 0 1.6vw;}
.index-field .mo{border-radius: 20px;background: #45939A;text-align:center;color:#fff;width:135px;line-height:43px;font-size:16px;}

.field-swiper .field-nav{ bottom:38px;width:200px;height:100px;left:50%;transform:translateX(-50%);z-index: 2;overflow: hidden;}
.sector{width:200px;height:200px;position:absolute;clip:rect(0 200px 200px 100px);overflow:hidden;cursor:pointer}
.sector::before{content:'';width:100%;height:100%;background:var(--bg-color);position:absolute;clip:rect(0 100px 200px 0);transform:rotate(55deg);border-radius:50%}
.sector1{transform:rotate(-90deg);}
.sector2{transform:rotate(-28deg);}
.sector3{transform:rotate(35deg);}

.sector1::after{content:'';width:200px;height:200px;position:absolute;background:rgba(0,0,0,.5);clip:rect(0 100px 100px 0);transform:rotate(55deg);border-radius:50%;transition:opacity .3s ease;pointer-events:none;z-index:999;}
.sector2::after{content:'';width:200px;height:200px;position:absolute;background:rgba(0,0,0,.5);clip:rect(0 100px 100px 0);transform:rotate(55deg);border-radius:50%;transition:opacity .3s ease;pointer-events:none;z-index:999;}
.sector3::after{content:'';width:200px;height:200px;position:absolute;background:rgba(0,0,0,.5);clip:rect(0 100px 100px 0);transform:rotate(55deg);border-radius:50%;transition:opacity .3s ease;pointer-events:none;z-index:999;}
.field-swiper .field-item.active::after{opacity: 0;}