<style>
/* --- 修复：新增一个 wrapper 来强制居中 --- */
#BGCMix-wrapper {
width: 100%;
}
/* --- 所有样式都已限定在 #sliderBGCMix 内部 --- */
/* --- 修复：使用 wrapper 居中 --- */
#sliderBGCMix {
max-width: 910px;
position: relative;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
border: 1px solid #e0e0e0;
margin-left: auto !important; /* 强制居中 */
margin-right: auto !important;
}
#sliderBGCMix .slide-btn-container {
display: flex;
flex-wrap: wrap; /* 允许换行，以防空间不足 */
gap: 15px;
margin-top: 20px;
}
#sliderBGCMix .slidebtn {
font-size: 22px;
color: #fff;
font-weight: 700;
text-decoration: none;
width: 150px; /* 桌面版固定宽度 */
display: block;
height: 50px;
text-align: center;
border-radius: 30px;
line-height: 50px;
background: linear-gradient(90deg, #fb3e73, #ffdf2b);
box-shadow: 0 4px 15px rgb(251 62 115 / 76%), 0px 11px 15px 0px rgb(255 223 43 / 69%);
transition: all 0.3s ease;
}
#sliderBGCMix .slidebtn:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgb(251 62 115 / 85%), 0px 15px 20px 0px rgb(255 223 43 / 80%);
}
#sliderBGCMix .slidebtn.btn-secondary {
background: transparent;
border: 2px solid #fff;
box-shadow: none;
}
#sliderBGCMix .slidebtn.btn-secondary:hover {
background: rgba(255, 255, 255, 0.1);
box-shadow: none;
transform: scale(1.05);
}
#sliderBGCMix .slider-nav-btn{position:absolute;transform:translateY(-50%);background:rgba(0,0,0,0.2);color:white;border:none;width:50px;height:50px;border-radius:50%;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;}
#sliderBGCMix .prev-btn{left:15px;top:50%;}
#sliderBGCMix .next-btn{right:15px;top:50%;}
#sliderBGCMix .forum-slider{display:flex;height: 475px;transition:transform 0.3s ease-out;}
#sliderBGCMix .forum-slider .slide-item {
width: 100%;
height: 100%;
flex-shrink: 0;
font-size: 0;
}
#sliderBGCMix .forum-slider img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
object-position: right center; /* --- 修改：图片靠右裁切 --- */
}
#sliderBGCMix .slider-caption{position:absolute;top:0;left:0;right:0;background:linear-gradient(to right,rgba(0,0,0,0.8),transparent);height: 100%;color:white;z-index:5;}
#sliderBGCMix .slider-caption-box{padding: 65px 20px 15px 70px;}
#sliderBGCMix .slide-pic img{height: 60px;}
#sliderBGCMix .slide-title{font-size:38px;margin:0 0 15px 0;font-weight:600;text-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);}
#sliderBGCMix .slide-desc{font-size:18px;margin:0;opacity:0.9;max-width:60%;}
@media (max-width: 767px) {
#sliderBGCMix .forum-slider{height: 225px;}
#sliderBGCMix .forum-slider img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
object-position: right center; /* --- 修改：图片靠右裁切 --- */
}
#sliderBGCMix .slider-caption-box{padding:15px 20px 15px 50px;}
#sliderBGCMix .slide-pic{margin: 0;}
#sliderBGCMix .slide-pic img{height: 40px;}
#sliderBGCMix .slider-nav-btn{width: 30px;height: 30px;}
#sliderBGCMix .slide-title{font-size:18px; margin-bottom: 8px;}
#sliderBGCMix .slide-desc{font-size:12px;max-width: 100%;}
#sliderBGCMix .slide-btn-container {
gap: 10px;
margin-top: 10px;
}
#sliderBGCMix .slidebtn {
width: auto;
flex-grow: 1;
min-width: 80px;
height: 30px;
line-height: 30px;
font-size: 14px;
margin-top: 0;
}
}
</style>
<!-- 修复：在轮播器外部添加一个 wrapper div -->
<div id="BGCMix-wrapper">
<!-- 修复：移除了 "slider-container" 类，避免样式冲突 -->
<div id="sliderBGCMix"></div>
</div>
<script>
// 使用 IIFE (立即执行函数) 包裹代码，防止全局污染
(function() {
class newMultiSlider {
constructor(containerId, sliderData) {
this.container = document.getElementById(containerId);
if (!this.container) {
console.error(`Slider container with id "${containerId}" not found.`);
return;
}
this.sliderData = sliderData;
this.currentSlide = 0;
this.autoplayInterval = null;
this.init();
}
init() {
this.createSliderHTML();
this.slider = this.container.querySelector(\\\'.forum-slider\\\');
this.indicators = this.container.querySelector(\\\'.slider-indicators\\\');
this.titleElement = this.container.querySelector(\\\'.slide-title\\\');
this.descElement = this.container.querySelector(\\\'.slide-desc\\\');
this.btn1 = this.container.querySelector(\\\'.slide-btn-1\\\');
this.btn2 = this.container.querySelector(\\\'.slide-btn-2\\\');
this.addSlides();
this.addIndicators();
// --- 新增：检查幻灯片数量 ---
if (this.sliderData.length <= 1) {
if(this.container.querySelector(\\\'.prev-btn\\\')) {
this.container.querySelector(\\\'.prev-btn\\\').style.display = \\\'none\\\';
}
if(this.container.querySelector(\\\'.next-btn\\\')) {
this.container.querySelector(\\\'.next-btn\\\').style.display = \\\'none\\\';
}
if(this.indicators) {
this.indicators.style.display = \\\'none\\\';
}
}
this.updateSlideInfo();
this.bindEvents();
this.startAutoplay();
}
createSliderHTML() {
this.container.innerHTML = `
<div class="forum-slider">
</div>
<button class="slider-nav-btn prev-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 19L8 12L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button class="slider-nav-btn next-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div class="slider-caption">
<div class="slider-caption-box">
<p class="slide-pic"><img src="https://oss-mahayu-01.oss-cn-hangzhou.aliyuncs.com/album/202509/16/162116pqdq0rrhu0huz0v6.png"></p>
<h3 class="slide-title"></h3>
<p class="slide-desc"></p>
<div class="slide-btn-container">
<a href="#" class="slide-btn slidebtn slide-btn-1" style="display:none;"></a>
<a href="#" class="slide-btn slidebtn slide-btn-2 btn-secondary" style="display:none;"></a>
</div>
</div>
</div>
<div class="slider-indicators" style="position:absolute;bottom:15px;right:20px;display:flex;gap:6px;z-index:10;">
</div>
`;
}
addSlides() {
this.sliderData.forEach((item, index) => {
const slide = document.createElement(\\\'div\\\');
slide.className = \\\'slide-item\\\';
const img = document.createElement(\\\'img\\\');
img.src = item.pic;
img.alt = item.title;
img.draggable = false;
img.onload = function() {
// console.log(`图片 ${index + 1} 加载成功`);
};
img.onerror = function() {
console.error(`图片 ${index + 1} 加载失败`);
img.src = `https://picsum.photos/800/450?random=${index}`;
img.alt = `${item.title} (加载失败)`;
};
slide.appendChild(img);
this.slider.appendChild(slide);
});
}
addIndicators() {
this.sliderData.forEach((_, index) => {
const dot = document.createElement(\\\'span\\\');
dot.style.display = \\\'inline-block\\\';
dot.style.width = \\\'10px\\\';
dot.style.height = \\\'10px\\\';
dot.style.borderRadius = \\\'50%\\\';
dot.style.cursor = \\\'pointer\\\';
dot.style.transition = \\\'all 0.3s ease\\\';
dot.style.backgroundColor = index === 0 ? \\\'#3b82f6\\\' : \\\'rgba(255,255,255,0.5)\\\';
dot.addEventListener(\\\'click\\\', () => this.goToSlide(index));
this.indicators.appendChild(dot);
});
}
bindEvents() {
// 仅在幻灯片大于1时绑定导航事件
if (this.sliderData.length > 1) {
this.container.querySelector(\\\'.prev-btn\\\').addEventListener(\\\'click\\\', () => this.prevSlide());
this.container.querySelector(\\\'.next-btn\\\').addEventListener(\\\'click\\\', () => this.nextSlide());
this.slider.addEventListener(\\\'mouseenter\\\', () => this.stopAutoplay());
this.slider.addEventListener(\\\'mouseleave\\\', () => this.startAutoplay());
}
}
goToSlide(index) {
if (index < 0 || index >= this.sliderData.length) return;
this.currentSlide = index;
this.updateSliderPosition();
this.updateSlideInfo();
}
prevSlide() {
this.goToSlide(this.currentSlide === 0 ? this.sliderData.length - 1 : this.currentSlide - 1);
}
nextSlide() {
this.goToSlide(this.currentSlide === this.sliderData.length - 1 ? 0 : this.currentSlide + 1);
}
updateSliderPosition() {
this.slider.style.transform = `translateX(-${this.currentSlide * 100}%)`;
if (this.sliderData.length > 1) {
const dots = this.indicators.querySelectorAll(\\\'span\\\');
dots.forEach((dot, index) => {
if (index === this.currentSlide) {
dot.style.backgroundColor = \\\'#3b82f6\\\';
dot.style.transform = \\\'scale(1.2)\\\';
} else {
dot.style.backgroundColor = \\\'rgba(255,255,255,0.5)\\\';
dot.style.transform = \\\'scale(1)\\\';
}
});
}
}
updateSlideInfo() {
const slideData = this.sliderData[this.currentSlide];
if (slideData) {
this.titleElement.textContent = slideData.title;
this.descElement.innerHTML = slideData.desc;
const buttons = slideData.buttons || [];
const btn1Data = buttons[0];
const btn2Data = buttons[1];
if (btn1Data && btn1Data.text) {
this.btn1.textContent = btn1Data.text;
this.btn1.href = btn1Data.url || \\\'#\\\';
this.btn1.style.display = \\\'block\\\';
} else {
this.btn1.style.display = \\\'none\\\';
}
if (btn2Data && btn2Data.text) {
this.btn2.textContent = btn2Data.text;
this.btn2.href = btn2Data.url || \\\'#\\\';
this.btn2.style.display = \\\'block\\\';
} else {
this.btn2.style.display = \\\'none\\\';
}
}
}
startAutoplay() {
// --- 新增：如果只有一张幻灯片，则不启动 ---
if (this.sliderData.length <= 1) {
this.stopAutoplay();
return;
}
this.stopAutoplay();
this.autoplayInterval = setInterval(() => this.nextSlide(), 5000);
}
stopAutoplay() {
if (this.autoplayInterval) {
clearInterval(this.autoplayInterval);
this.autoplayInterval = null;
}
}
}
const sliderDataBGCMix = [
{
pic: "https://oss-mahayu-hongkong.oss-cn-hongkong.aliyuncs.com/image/%E5%AE%A3%E4%BC%A0%E6%9D%A1%E5%B9%85/%E7%99%BE%E9%AC%BC1-%E5%B7%A6%E6%96%87%E5%8F%B3%E5%9B%BE-%E5%8F%B3%E4%BE%A7%E4%BF%AE%E6%94%B9%E7%89%88.jpg?x-oss-process=style/MAHAYU.XYZ",
title: "百鬼抄EX-1！",
desc: "三十多大类，三百多种造型的怪物娘！<br>通灵召唤千百怪物娘！天际除妖之旅！<br>自选3种服装风格！自定数量、难度！<br>大绅士神乐殿堂联动！私密星怒版！",
buttons: [
{ text: "点此兑换", url: "plugin.php?id=it618_tuan:product&pid=20" },
{ text: "查看详情", url: "plugin.php?id=it618_tuan:product&pid=20" }
]
},
{
pic: "https://oss-mahayu-hongkong.oss-cn-hongkong.aliyuncs.com/image/%E5%AE%A3%E4%BC%A0%E6%9D%A1%E5%B9%85/%E9%AC%BC5-%E4%BB%99%E4%BE%A0%E7%99%BE%E9%AC%BC-%E5%B7%A6%E6%96%87%E5%8F%B3%E5%9B%BE2.15-%E8%BF%B7%E4%BD%A0%E5%B0%BA%E5%AF%B8.jpg?x-oss-process=style/MAHAYU.XYZ",
title: "百鬼抄EX-5！",
desc: "100+怪物娘，身着国风绫罗华服！<br>全物理服装！翩翩飞舞！！<br>最华丽、最仙侠版本的百鬼抄来喽！<br>齁吼吼吼！一起私密修仙！",
buttons: [
{ text: "点此兑换", url: "plugin.php?id=it618_tuan:product&pid=82" },
{ text: "查看详情", url: "plugin.php?id=it618_tuan:product&pid=82" }
]
},
{
pic: "https://oss-mahayu-hongkong.oss-cn-hongkong.aliyuncs.com/image/%E5%AE%A3%E4%BC%A0%E6%9D%A1%E5%B9%85/%E7%99%BE%E9%AC%BC%E4%BA%8C2.15-1-%E5%B7%A6%E6%96%87%E5%8F%B3%E5%9B%BE2.jpg?x-oss-process=style/MAHAYU.XYZ",
title: "百鬼抄EX-2！",
desc: "可以实验室骑，也可以当坐骑！<br>怪物娘 ，骑乘系统解禁！少女骑乘！<br>200+漂亮外观！随从、敌人兼具！<br>大绅士骑行！启动！",
buttons: [
{ text: "点此兑换", url: "plugin.php?id=it618_tuan:product&pid=21" },
{ text: "查看详情", url: "plugin.php?id=it618_tuan:product&pid=21" }
]
},
{
pic: "https://oss-mahayu-hongkong.oss-cn-hongkong.aliyuncs.com/image/%E5%AE%A3%E4%BC%A0%E6%9D%A1%E5%B9%85/%E6%96%B0%E9%AC%BC%E5%9B%9B-%E5%B7%A6%E6%96%87%E5%8F%B3%E5%9B%BE2.15-%E8%BF%B7%E4%BD%A0%E5%B0%BA%E5%AF%B8.jpg?x-oss-process=style/MAHAYU.XYZ",
title: "百鬼抄EX-4！",
desc: "平安京乱，大鬼降世！<br>知名画师联名，全新绝美设计！ ！<br>100+漂亮外观！随从、敌人兼具！<br>后宫！物理服装！妖力武装！启动！",
buttons: [
{ text: "点此兑换", url: "plugin.php?id=it618_tuan:product&pid=23" },
{ text: "查看详情", url: "plugin.php?id=it618_tuan:product&pid=23" }
]
},
{
pic: "https://oss-mahayu-hongkong.oss-cn-hongkong.aliyuncs.com/image/%E5%AE%A3%E4%BC%A0%E6%9D%A1%E5%B9%85/%E7%99%BE%E9%AC%BC3%202.15%EF%BC%9A1-%E5%B7%A6%E6%96%87%E5%8F%B3%E5%9B%BE.jpg?x-oss-process=style/MAHAYU.XYZ",
title: "百鬼抄EX-3！",
desc: "荧荧微光，性感内衣！<br>轻口味的内衣风怪物娘系列来啦！ ！<br>100+漂亮外观！随从、敌人兼具！<br>后宫！启动！",
buttons: [
{ text: "点此兑换", url: "plugin.php?id=it618_tuan:product&pid=22" },
{ text: "查看详情", url: "plugin.php?id=it618_tuan:product&pid=22" }
]
}
];
if (document.readyState === \\\'loading\\\') {
document.addEventListener(\\\'DOMContentLoaded\\\', () => {
new newMultiSlider(\\\'sliderBGCMix\\\', sliderDataBGCMix);
});
} else {
new newMultiSlider(\\\'sliderBGCMix\\\', sliderDataBGCMix);
}
})();
</script>
