封面：
已进行错误修复和优化
<link rel="stylesheet" href="https://www.xkzhi.com/wp-content/themes/zibll/css/xkzhi/Banner.css">
<style>
/* 1. 整合所有样式，删除重复定义，使用CSS变量 */
:root {
-slide-transition: opacity 0.8s ease-in-out;
-nav-bg: rgba(255, 255, 255, 0.2);
-nav-hover-bg: rgba(255, 255, 255, 0.4);
-indicator-inactive: rgba(255, 255, 255, 0.5);
-indicator-active: white;
-default-transition: background 0.3s;
}
/* 幻灯片核心样式 */
.slideshow-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 12px;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: var(--slide-transition);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 2rem;
box-sizing: border-box;
}
.slide.active {
opacity: 1;
}
.slide-content {
position: relative;
z-index: 2;
}
/* 幻灯片背景：添加默认色避免加载空白 */
.slide-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f5f5f5; /* 加载过渡色 */
background-size: cover;
background-position: center;
z-index: -1;
}
.slide-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
cursor: pointer;
}
/* 指示器与导航按钮 */
.slide-indicators {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 3;
}
.slide-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--indicator-inactive);
cursor: pointer;
transition: var(--default-transition);
}
.slide-indicator.active {
background: var(--indicator-active);
}
.slide-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--nav-bg);
border: none;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 4;
backdrop-filter: blur(10px);
transition: var(--default-transition);
}
.slide-nav:hover {
background: var(--nav-hover-bg);
}
.slide-nav.prev {
left: 1rem;
}
.slide-nav.next {
right: 1rem;
}
/* 原有基础样式 */
.todayCard-title,
.todayCard-tips,
.topGroup.banner-button {
color: #ffffff;
}
.topGroup.todayCard {
background: #000000;
}
/* 2. 新增响应式适配（小屏设备优化） */
@media (max-width: 768px) {
/* 缩小内边距 */
.slide {
padding: 1rem;
}
/* 缩小导航按钮 */
.slide-nav {
width: 32px;
height: 32px;
}
/* 工具图标自适应换行，避免溢出 */
.tags-group-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* 分类按钮换行显示 */
.categoryGroup {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
}
</style>
<div id="home_top">
<div class="recent-top-post-group" id="recent-top-post-group">
<div class="recent-post-top" id="recent-post-top">
<div id="bannerGroup">
<div id="banners">
<div class="banners-title">
<div class="banners-title-big">春眠不觉晓</div>
<div class="banners-title-big">奇乐无穷</div>
<div class="banners-title-small">CMBJX.COM</div>
</div>
<!-- 工具图标区：添加懒加载属性 loading="lazy" -->
<div class="tags-group-all">
<div class="tags-group-wrapper">
<!-- 图标组模板 -->
<script type="text/template" id="icon-pair-template">
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:{{color1}}">
<img title="{{title1}}"
src="{{src1}}"
loading="lazy"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'">
</div>
<div class="tags-group-icon" style="background:{{color2}}">
<img title="{{title2}}"
src="{{src2}}"
loading="lazy"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'">
</div>
</div>
</script>
<!-- 图标数据将通过JS动态生成 -->
</div>
</div>
<a id="banner-hover" href="/wp-json/wp/v2/random-post" rel="external nofollow" data-pjax-state="">
<i class="heofont icon-right"></i>
<span class="bannerText">随机文章</span>
</a>
</div>
<!-- 分类导航区 -->
<div class="categoryGroup">
<div class="categoryItem">
<a class="categoryButton wniui_one" href="/cx" rel="external nofollow" data-pjax-state="">
<span class="categoryButtonText">春晓影视</span>
<i class="heofont icon-star-smile-fill"></i>
</a>
</div>
<div class="categoryItem">
<a class="categoryButton wniui_two" href="/sj" rel="external nofollow" data-pjax-state="">
<span class="categoryButtonText">手机影视</span>
<i class="heofont icon-fire-fill"></i>
</a>
</div>
<div class="categoryItem">
<a class="categoryButton wniui_three" href="/tv" rel="external nofollow" data-pjax-state="">
<span class="categoryButtonText">TV影视</span>
<i class="heofont icon-book-mark-fill"></i>
</a>
</div>
</div>
</div>
<!-- 幻灯片区：保持结构不变，优化图片加载 -->
<div class="topGroup">
<div class="todayCard" id="todayCard" style="z-index: 1;">
<div class="slideshow-container" id="slideshow">
<!-- 幻灯片将通过JS动态生成 -->
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// 配置数据
const SLIDE_CONFIG = {
INTERVAL: 5000,
DEFAULT_ICON: 'https://bu.dusays.com/2023/03/03/6401a79030db5.png',
SLIDES: [
{
link: "https://www.qlwq.cc/",
image: "https://www.qlwq.cc/wp-content/uploads/2025/10/金克丝2.jpg",
button: {
icon: "icon-add-circle-fill",
text: "发布文章",
link: "/newposts"
}
},
{
link: "https://www.qlwq.cc/",
image: "https://www.qlwq.cc/wp-content/uploads/2025/10/金克丝1.jpg",
button: {
icon: "icon-palette-fill",
text: "发布文章",
link: "/newposts"
}
}
]
};
const ICON_CONFIG = [
{ color1: "#989bf8", title1: "AfterEffects", src1: "https://p.zhheo.com/20239df3f66615b532ce571eac6d14ff21cf072602.png!cover",
color2: "#ffffff", title2: "Sketch", src2: "https://p.zhheo.com/2023e0ded7b724a39f12d59c3dc8fbdc7cbe074202.png!cover" },
{ color1: "#57b6e6", title1: "Docker", src1: "https://p.zhheo.com/20231108a540b2862d26f8850172e4ea58ed075102.png!cover",
color2: "#4082c3", title2: "Photoshop", src2: "https://p.zhheo.com/2023e4058a91608ea41751c4f102b131f267075902.png!cover" },
{ color1: "#ffffff", title1: "FinalCutPro", src1: "https://p.zhheo.com/20233e777652412247dd57fd9b48cf997c01070702.png!cover",
color2: "#ffffff", title2: "Python", src2: "https://p.zhheo.com/20235c0731cd4c0c95fc136a8db961fdf963071502.png!cover" },
{ color1: "#f7cb4f", title1: "JS", src1: "https://p.zhheo.com/2023786e7fc488f453d5fb2be760c96185c0075502.png!cover",
color2: "#e9572b", title2: "HTML", src2: "https://p.zhheo.com/202372b4d760fd8a497d442140c295655426070302.png!cover" }
];
// 工具函数
const utils = {
// 生成HTML模板
renderTemplate(template, data) {
return template.replace(/\{\{(\w+)\}\}/g, (match, key) => data[key] || '');
},
// 预加载图片
preloadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = resolve;
img.onerror = reject;
img.src = url;
});
},
// 防抖函数
debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
};
// 幻灯片类
class Slideshow {
constructor(container, config) {
this.container = container;
this.config = config;
this.slides = [];
this.indicators = [];
this.currentIndex = 0;
this.intervalId = null;
this.isTransitioning = false;
this.init();
}
init() {
this.renderSlides();
this.cacheElements();
this.bindEvents();
this.start();
}
renderSlides() {
const slidesHtml = this.config.SLIDES.map((slide, index) => `
<div class="slide ${index === 0 ? 'active' : ''}">
<a class="slide-link" href="${slide.link}"></a>
<div class="slide-cover" style="background: url('${slide.image}') no-repeat center / cover"></div>
<div class="slide-content">
<div class="todayCard-info">
<div class="todayCard-tips"></div>
<div class="todayCard-title"></div>
</div>
<div class="banner-button-group">
<a class="banner-button" href="${slide.button.link}" rel="external nofollow">
<i class="heofont ${slide.button.icon}"></i>
<span class="banner-button-text">${slide.button.text}</span>
</a>
</div>
</div>
</div>
`).join('');
const indicatorsHtml = this.config.SLIDES.map((_, index) =>
`<span class="slide-indicator ${index === 0 ? 'active' : ''}" data-index="${index}"></span>`
).join('');
this.container.innerHTML = `
${slidesHtml}
<button class="slide-nav prev">‹</button>
<button class="slide-nav next">›</button>
<div class="slide-indicators">${indicatorsHtml}</div>
`;
}
cacheElements() {
this.slides = this.container.querySelectorAll('.slide');
this.indicators = this.container.querySelectorAll('.slide-indicator');
this.prevBtn = this.container.querySelector('.slide-nav.prev');
this.nextBtn = this.container.querySelector('.slide-nav.next');
}
bindEvents() {
// 导航按钮事件
this.prevBtn.addEventListener('click', (e) => {
e.stopPropagation();
this.prev();
});
this.nextBtn.addEventListener('click', (e) => {
e.stopPropagation();
this.next();
});
// 指示器事件
this.indicators.forEach(indicator => {
indicator.addEventListener('click', (e) => {
e.stopPropagation();
const index = parseInt(indicator.getAttribute('data-index'));
this.goTo(index);
});
});
// 鼠标事件
this.container.addEventListener('mouseenter', () => this.stop());
this.container.addEventListener('mouseleave', () => this.start());
// 键盘事件
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') this.prev();
if (e.key === 'ArrowRight') this.next();
});
}
goTo(index) {
if (this.isTransitioning || index === this.currentIndex) return;
this.isTransitioning = true;
// 更新当前幻灯片状态
this.slides[this.currentIndex].classList.remove('active');
this.indicators[this.currentIndex].classList.remove('active');
// 更新新幻灯片状态
this.currentIndex = index;
this.slides[this.currentIndex].classList.add('active');
this.indicators[this.currentIndex].classList.add('active');
// 重置过渡状态
setTimeout(() => {
this.isTransitioning = false;
}, 800);
}
next() {
const nextIndex = (this.currentIndex + 1) % this.slides.length;
this.goTo(nextIndex);
}
prev() {
const prevIndex = (this.currentIndex - 1 + this.slides.length) % this.slides.length;
this.goTo(prevIndex);
}
start() {
this.stop();
this.intervalId = setInterval(() => this.next(), this.config.INTERVAL);
}
stop() {
if (this.intervalId) {
clearInterval(this.intervalId);
this.intervalId = null;
}
}
}
// DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
// 初始化轮播图
const slideshowContainer = document.getElementById('slideshow');
const slideshow = new Slideshow(slideshowContainer, SLIDE_CONFIG);
// 动态生成图标
const iconTemplate = document.getElementById('icon-pair-template').innerHTML;
const iconContainer = document.querySelector('.tags-group-wrapper');
iconContainer.innerHTML = ICON_CONFIG.map(icon =>
utils.renderTemplate(iconTemplate, icon)
).join('');
// 预加载轮播图图片
Promise.allSettled(
SLIDE_CONFIG.SLIDES.map(slide => utils.preloadImage(slide.image))
).then(results => {
console.log('图片预加载完成', results);
});
});
</script>横向：
完美之作
<div class="textwidget custom-html-widget">
<div class="wapnone">
<style>
.file-format {
padding: 0 20px;
height: 38px;
background: linear-gradient(224deg, rgba(255, 110, 144, .08), rgba(208, 147, 255, .08) 42%, rgba(105, 105, 255, .08));
border-radius: 28px;
display: flex;
align-items: center;
justify-content: center;
}
span.txt-file-format {
font-size: 13px;
font-weight: 700;
color: var(--main-color);
line-height: 18px;
margin-right: 17px;
}
.typed-cursor--blink {
animation: typedjsBlink 0.7s infinite;
}
.file-format-icons i {
width: 26px;
height: 26px;
display: inline-block;
vertical-align: middle;
margin-right: 9px; /* 统一设置图标的右边距 */
}
i.icon_sketch[data-v-2775696c] {
width: 26px;
height: 26px;
display: inline-block;
background: url(https://zy.nuoyo.cn/images/ai/icon-sketch.svg) no-repeat 50% / 100%;
vertical-align: middle;
}
i.icon_ps[data-v-2775696c] {
background: url(https://zy.nuoyo.cn/images/ai/icon-ps.svg) no-repeat 50% / 100%;
}
i.icon_ai[data-v-2775696c] {
background: url(https://zy.nuoyo.cn/images/ai/icon-ai.svg) no-repeat 50% / 100%;
}
i.icon_3dMax[data-v-2775696c] {
background: url(https://zy.nuoyo.cn/images/ai/icon-3dMax.svg) no-repeat 50% / 100%;
}
i.icon_cdr[data-v-2775696c] {
background: url(https://zy.nuoyo.cn/images/ai/icon-cdr.svg) no-repeat 50% / 100%;
}
i.icon_c4d[data-v-2775696c] {
background: url(https://zy.nuoyo.cn/images/ai/icon-c4d.svg) no-repeat 50% / 100%;
}
i.icon_blender[data-v-2775696c] {
background: url(https://zy.nuoyo.cn/images/ai/icon-blender.svg) no-repeat 50% / 100%;
}
#zuixinfabu {
display: flex;
align-items: center;
justify-content: space-between;
}
.index-new img {
height: 35px;
padding-left: 10px;
}
.index-new {
margin-bottom: 5px;
}
@media screen and (max-width: 1221px) {
.wapnone { display: none; }
}
.header-container {
display: flex;
align-items: center;
}
.header-text {
display: flex;
align-items: center;
margin-left: 10px;
}
</style>
<div id="zuixinfabu" class="index-new header-container">
<img draggable="false" oncontextmenu="return false;" src="https://zy.nuoyo.cn/pic/index-new.svg" alt="最新发布">
<div class="header-text">
<span id="nuoyan-tips" class="txt-file-format" data-v-2775696c=""></span>
<span class="typed-cursor typed-cursor--blink" aria-hidden="true"></span>
<span class="file-format-icons" data-v-2775696c="">
<i class="icon_ps" data-v-2775696c=""></i>
<i class="icon_ai" data-v-2775696c=""></i>
<i class="icon_sketch" data-v-2775696c=""></i>
<i class="icon_3dMax" data-v-2775696c=""></i>
<i class="icon_cdr" data-v-2775696c=""></i>
<i class="icon_c4d" data-v-2775696c=""></i>
<i class="icon_blender" data-v-2775696c=""></i>
</span>
</div>
</div>
</div>
</div>
© 版权声明
1、本网站名称：春眠不觉晓
2、本站永久网址：https://www.qlwq.cc
3、本站文章内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系Q/V：775182000。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
6、本站资源大多存储在云盘，如发现链接失效,请告诉我们，我们会第一时间更新。
THE END
暂无评论内容