/* ================= 视频时长工具 ================= */ function getVideoDuration(url) { return new Promise(function (resolve) { var video = document.createElement('video'); video.preload = 'metadata'; video.src = url; video.onloadedmetadata = function () { resolve(Math.floor(video.duration * 1000)); video = null; }; }); } /* ================= 参数 ================= */ var bannerOffset = 0.7; // 视差比例 var timer = null; // 统一定时器 var IMAGE_DELAY = 7000; // 图片停留时间 /* ================= Swiper 配置 ================= */ var indexBanner = new Swiper('.bannerSwiper', { loop: true, speed: 1000, autoplay: false, watchSlidesProgress: true, allowTouchMove: true, pagination: { el: '.inBannerElNum', type: 'fraction' }, on: { /* ---------- 初始化 ---------- */ init: function (swiper) { playCurrentSlide(swiper); }, /* ---------- 切换开始 ---------- */ slideChangeTransitionStart: function (swiper) { clearTimeout(timer); // 停止并重置所有视频 swiper.slides.forEach(function (slide) { var video = slide.querySelector('video'); if (video) { video.pause(); video.currentTime = 0; } }); }, /* ---------- 切换结束 ---------- */ slideChangeTransitionEnd: function (swiper) { playCurrentSlide(swiper); }, /* ---------- 视差 ---------- */ progress: function (swiper) { swiper.slides.forEach(function (slide) { var inner = slide.querySelector('.slide-inner'); if (!inner) return; var progress = slide.progress; var translate = progress * swiper.width * bannerOffset; inner.style.transform = 'translate3d(' + translate + 'px,0,0)'; }); }, touchStart: function (swiper) { swiper.slides.forEach(function (slide) { slide.style.transition = ''; }); }, setTransition: function (swiper, speed) { swiper.slides.forEach(function (slide) { slide.style.transition = speed + 'ms'; var inner = slide.querySelector('.slide-inner'); if (inner) inner.style.transition = speed + 'ms'; }); } } }); /* ================= 播放当前 Slide ================= */ function playCurrentSlide(swiper) { clearTimeout(timer); var slide = swiper.slides[swiper.activeIndex]; if (!slide) return; var type = slide.getAttribute('dataType'); /* -------- 视频 -------- */ if (type === 'video') { var video = slide.querySelector('video'); if (!video) return; video.currentTime = 0; video.muted = true; video.play(); // 防止 ended 事件叠加 video.onended = null; video.onended = function () { timer = setTimeout(function () { swiper.slideNext(); }, 1); }; } /* -------- 图片 -------- */ else { timer = setTimeout(function () { swiper.slideNext(); }, IMAGE_DELAY); } } -->