<!-- section3 -->
<div data-dot class="section3 r3 overflow">
<div class="hm-title3 text-center wow fadeInUp mb-50" {{ inject('visual')->url('block', 'hm-choose-title') }}>
<h3 class="mb-20">{!! inject('block')->block('hm-choose-title', 'title') !!}</h3>
<div class="p1 mb-30">{!! inject('block')->block('hm-choose-title', 'extend') !!}</div>
<div class="p2"><a href="/">{!! inject('block')->block('learn-more', 'title') !!}</a></div>
</div>
<div class="inner maxSize">
<div class="mid swiper_r3App">
<div id="cirFn" class="cirBox">
<svg id="cirLine" viewBox="0 0 711 711">
<path class="st" fill-rule="evenodd" d="m618.881 134.735 6.344-5.198C574.05 68.3 501.428 25.543 423.012 10.439c-39.272-6.666-79.577-8.863-119.144-2.832-39.459 6.066-77.835 18.747-113.098 37.384-35.256 18.628-67.451 43.117-94.684 72.343a356.923 356.923 0 0 0-64.53 100.162l-5.861 13.778c-2.126 4.529-3.144 9.465-4.77 14.178l-4.45 14.297c-1.524 4.756-3.056 9.51-3.855 14.452l-5.973 29.35-2.988 29.805c-2.429 39.853 1.694 80.077 12.419 118.56 3.123 9.481 5.485 19.241 9.231 28.498l11.59 27.645 14.17 26.424c4.942 8.677 10.92 16.734 16.329 25.133 23.137 32.595 51.725 61.288 84.262 84.524 64.835 47.379 146.69 68.781 226.428 64.755 80.075-4.783 157.586-38.303 216.902-92.082 59.541-53.899 98.46-128.824 111.065-207.922-12.443 79.12-51.223 154.186-110.737 208.28-59.284 53.974-136.878 87.736-217.169 92.696-79.945 4.202-162.131-17.096-227.334-64.537-32.72-23.266-61.496-52.028-84.809-84.732-5.454-8.426-11.474-16.514-16.46-25.224l-14.294-26.529-11.71-27.765c-3.782-9.302-6.18-19.105-9.338-28.635C3.34 413.771-.891 373.317 1.472 333.212l2.949-29.996 5.947-29.55c.798-4.976 2.328-9.764 3.851-14.554l4.452-14.402c1.627-4.748 2.645-9.72 4.776-14.284l5.869-13.887c15.724-36.958 37.713-71.256 64.8-101.021 27.378-29.502 59.773-54.253 95.285-73.106 35.513-18.864 74.197-31.734 114.001-37.934C343.317-1.685 384 .436 423.66 7.095 502.87 22.182 576.368 65.24 628.229 127.06l-.75.63 7.334-6.009.123 8.268.123 8.267-8.089-1.74-8.089-1.741Z" />
</svg>
<ul class="dotItems">
@foreach (inject('photoGroup')->list(3) as $key => $value)
<li class="dot @if($key==0)on @endif">
<span></span>
</li>
@endforeach
</ul>
<div class="imgBox">
@foreach (inject('photoGroup')->list(3) as $key => $value)
<div class="photo @if($key==0)on @endif">
<div class="lazy pic" style="background-image: url({{ $value->description->present()->images(0) }});"></div>
</div>
@endforeach
</div>
</div>
<div id="cirItems" class="items pc">
<ul class="list right">
@foreach (inject('photoGroup')->list(3) as $key => $value)
@if($key == 0)
<li data-num="{{ $key }}" class="alanFn on">
<span class="en_bold f-24 num wc hidden">0{{ $key+1 }}</span>
<h3 class="en_bold f-30 wc"> {{ $value->description->title }}</h3>
<p class="f-14 wc">{!! $value->description->summary !!}</p>
</li>
@endif
@endforeach
</ul>
<ul class="list bottom">
@foreach (inject('photoGroup')->list(3) as $key => $value)
@if($key == 1)
<li data-num="{{ $key }}" class="alanFn">
<span class="en_bold f-24 num mc hidden">0{{ $key+1 }}</span>
<h3 class="en_bold f-30 mc"> {{ $value->description->title }}</h3>
<p class="f-14 mc">{!! $value->description->summary !!}</p>
</li>
@endif
@endforeach
</ul>
<ul class="list left">
@foreach (inject('photoGroup')->list(3) as $key => $value)
@if($key == 2)
<li data-num="{{ $key }}" class="alanFn">
<span class="en_bold f-24 num oc hidden">0{{ $key+1 }}</span>
<h3 class="en_bold f-30 oc"> {{ $value->description->title }}</h3>
<p class="f-14 oc">{!! $value->description->summary !!}</p>
</li>
@endif
@endforeach
</ul>
</div>
<ul id="cirItemsApp" class="items app">
<div class="swiper-wrapper">
@foreach (inject('photoGroup')->list(3) as $key => $value)
<li data-num="{{ $key }}" class="swiper-slide">
<span class="en_bold f-24 num wc hidden">0{{ $key+1 }}</span>
<h3 class="en_bold f-30 clamp1 @if($key == 0)wc @elseif($key == 1)mc @elseif($key == 2)oc @endif ">{{ $value->description->title }}</h3>
<p class="f-14 clamp2 @if($key == 0)wc @elseif($key == 1)mc @elseif($key == 2)oc @endif ">{!! $value->description->summary !!}</p>
</li>
@endforeach
</div>
</ul>
<div class="swiper-button-prev swiper-button-prev4 iconfont2 app"></div>
<div class="swiper-button-next swiper-button-next4 iconfont2 app"></div>
</div>
</div>
</div>
<script>
(function($){
document.addEventListener("DOMContentLoaded", () => {
const cirFn = document.querySelector("#cirFn");
const cirLine = document.querySelector("#cirLine");
const cirItems = document.querySelector("#cirItems");
const photos = $(cirFn).find(".imgBox .photo");
const dots = $(cirFn).find(".dotItems .dot");
const btnPrev = document.querySelector(".swiper-button-prev4");
const btnNext = document.querySelector(".swiper-button-next4");
const cirItemsApp = document.querySelector("#cirItemsApp");
let isMobile = window.innerWidth <= 900;
let numSlides = photos.length;
let angles = Array.from({length: numSlides}, (_, i) => i * (360 / numSlides));
let colorMap = ["wc","mc","oc","oc","mc","mc"];
while(colorMap.length < numSlides) colorMap.push("wc");
let currentIndex = 0;
let angle = 0;
let speed = 0.3;
let playing = true;
let rafId = null;
let swiperApp = null;
// ----------------------------
// 更新 UI
// ----------------------------
function updateActive(n){
photos.removeClass("on").eq(n).addClass("on");
dots.removeClass("on mc oc wc").eq(n).addClass("on").addClass(colorMap[n]);
$(cirItems).find("[data-num]").each(function(){
$(this).toggleClass("on", parseInt($(this).attr("data-num")) === n);
});
cirLine.className = "";
cirLine.classList.add(colorMap[n]);
}
// ----------------------------
// 移动端圆环同步旋转
// ----------------------------
function updateMobileAngle(idx){
if(cirLine) cirLine.style.transform = `rotate(${angles[idx]}deg)`;
}
// ----------------------------
// 平滑旋转到目标 index（PC）
// ----------------------------
function gotoSlide(targetIndex){
if(isMobile){
swiperApp && swiperApp.slideToLoop(targetIndex);
return;
}
playing = false;
cancelAnimationFrame(rafId);
const startAngle = angle;
const endAngle = angles[targetIndex];
const duration = 500;
const startTime = performance.now();
function animateToTarget(now){
const elapsed = now - startTime;
let progress = Math.min(elapsed / duration, 1);
// ease-out
progress = 1 - Math.pow(1 - progress, 3);
angle = startAngle + (endAngle - startAngle) * progress;
cirLine.style.transform = `rotate(${angle}deg)`;
// 更新当前 index
for(let n = angles.length - 1; n >= 0; n--){
if(angle >= angles[n]){
if(currentIndex !== n){
updateActive(n);
currentIndex = n;
}
break;
}
}
if(progress < 1){
requestAnimationFrame(animateToTarget);
} else {
setTimeout(() => { playing = true; animate(); }, 0);
}
}
requestAnimationFrame(animateToTarget);
}
// ----------------------------
// 自动旋转（PC）
// ----------------------------
function animate(){
if(!isMobile && playing){
angle = (angle + speed) % 360;
cirLine.style.transform = `rotate(${angle}deg)`;
let n = 0;
for(let i = 0; i < angles.length; i++){
if(angle >= angles[i]) n = i;
}
if(currentIndex !== n){
updateActive(n);
currentIndex = n;
}
}
rafId = requestAnimationFrame(animate);
}
// ----------------------------
// 点击事件
// ----------------------------
dots.on("click", function(){
gotoSlide($(this).index());
});
$(cirItems).find(".list>li").on("click", function(){
const index = parseInt($(this).attr("data-num"));
gotoSlide(index);
});
btnPrev && btnPrev.addEventListener("click", () => {
gotoSlide((currentIndex - 1 + numSlides) % numSlides);
});
btnNext && btnNext.addEventListener("click", () => {
gotoSlide((currentIndex + 1) % numSlides);
});
cirFn.addEventListener("mouseenter", () => playing = false);
cirFn.addEventListener("mouseleave", () => playing = true);
animate();
// ----------------------------
// 移动端 Swiper
// ----------------------------
function initMobileSwiper(){
if(!isMobile || !cirItemsApp) return;
swiperApp = new Swiper("#cirItemsApp", {
slidesPerView: 1,
loop: false,
speed:800,
autoplay: {
delay: 3500,
disableOnInteraction: false,
},
navigation: {
nextEl: ".swiper-button-next4",
prevEl: ".swiper-button-prev4",
},
});
updateActive(swiperApp.realIndex);
updateMobileAngle(swiperApp.realIndex);
currentIndex = swiperApp.realIndex;
swiperApp.on("slideChange", () => {
let idx = swiperApp.realIndex;
updateActive(idx);
updateMobileAngle(idx);
currentIndex = idx;
});
}
initMobileSwiper();
// ----------------------------
// 窗口 resize 响应
// ----------------------------
window.addEventListener("resize", () => {
const nowMobile = window.innerWidth <= 900;
if(nowMobile !== isMobile){
isMobile = nowMobile;
if(isMobile){
initMobileSwiper();
playing = false;
} else {
swiperApp && swiperApp.destroy(true, true);
swiperApp = null;
playing = true;
animate();
}
}
});
});
})(jQuery);
</script>上一篇：banner 背景视频 文字飞入
下一篇：已经是最后一篇