<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>林熙 | 个人主页</title>
<meta name="description" content="一个热衷于分享资源/教程/生活的站长的站点">
<meta name="keywords" content="linxiyy,linxiyy主页,个人导航页,林熙导航,林熙主页,林熙杂谈">
<link rel="icon" href="./static/img/favicon.ico">
<!-- 字体引入 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--primary-color: #3a86ff;
--secondary-color: #8338ec;
--dark-color: #1a1a2e;
--light-color: #f8f9fa;
--gray-color: #6c757d;
--light-gray: #e9ecef;
--transition: all 0.3s ease;
--border-radius: 12px;
--box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
--box-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans SC', sans-serif;
background-color: var(--light-color);
color: var(--dark-color);
line-height: 1.6;
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* 头部样式 */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
z-index: 1000;
padding: 1rem 2rem;
}
.header_box {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.logo img {
height: 40px;
}
.bar {
display: flex;
gap: 1.5rem;
}
.nav-item {
position: relative;
padding: 0.5rem 0;
font-weight: 500;
color: var(--gray-color);
}
.nav-item:hover, .nav-item.active {
color: var(--primary-color);
}
.nav-item::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary-color);
transition: var(--transition);
}
.nav-item:hover::after, .nav-item.active::after {
width: 100%;
}
/* 主要内容区域 */
.main_center {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 6rem 2rem 4rem;
background: linear-gradient(135deg, rgba(58, 134, 255, 0.03) 0%, rgba(131, 56, 236, 0.03) 100%);
}
.avatar {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 4px solid white;
box-shadow: var(--box-shadow);
margin-bottom: 1.5rem;
}
.site-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.motto {
font-size: 1.2rem;
color: var(--gray-color);
margin-bottom: 1.5rem;
font-weight: 300;
}
.line {
width: 80px;
height: 2px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
margin: 1.5rem auto;
border-radius: 2px;
}
/* 卡片布局 */
.main {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 992px) {
.main {
grid-template-columns: 2fr 1fr;
}
}
.card {
background-color: white;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
padding: 1.5rem;
transition: var(--transition);
margin-bottom: 1.5rem;
}
.card:hover {
box-shadow: var(--box-shadow-hover);
transform: translateY(-3px);
}
/* 轮播图样式 */
.carousel {
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
height: 300px;
}
.slides {
display: flex;
height: 100%;
transition: transform 0.5s ease;
}
.slide {
min-width: 100%;
height: 100%;
}
.blog-card {
display: block;
height: 100%;
position: relative;
}
.blog-card img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--border-radius);
}
.text-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
color: white;
padding: 1.5rem;
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.text-slide {
display: none;
}
.text-slide.active {
display: block;
}
.date {
font-size: 0.9rem;
opacity: 0.8;
margin-bottom: 0.5rem;
}
.excerpt {
font-size: 0.95rem;
margin-bottom: 0.5rem;
}
.title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
}
.button {
display: inline-block;
padding: 0.5rem 1.5rem;
background-color: var(--primary-color);
color: white;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 500;
transition: var(--transition);
}
.button:hover {
background-color: var(--secondary-color);
transform: translateY(-2px);
}
.dots {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.5rem;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
border: none;
cursor: pointer;
transition: var(--transition);
}
.dot.active {
background-color: white;
transform: scale(1.2);
}
/* 音乐播放器 */
.music-player {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1.5rem;
}
.cover {
width: 60px;
height: 60px;
border-radius: var(--border-radius);
overflow: hidden;
flex-shrink: 0;
}
.cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.music-player p {
flex-grow: 1;
font-weight: 500;
color: var(--dark-color);
}
.controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
.play-pause-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--primary-color);
color: white;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
}
.play-pause-btn:hover {
background-color: var(--secondary-color);
transform: scale(1.05);
}
.pause-icon {
display: none;
}
.playing .play-icon {
display: none;
}
.playing .pause-icon {
display: block;
}
/* URL卡片 */
.url-card {
display: flex;
align-items: center;
gap: 1.5rem;
margin-top: 1.5rem;
color: var(--dark-color);
padding: 1rem;
border-radius: var(--border-radius);
transition: var(--transition);
}
.url-card:hover {
background-color: rgba(58, 134, 255, 0.05);
}
.url-card .des {
flex-grow: 1;
}
.url-card .des svg {
width: 24px;
height: 24px;
margin-bottom: 0.5rem;
color: var(--primary-color);
}
.url-card .des p {
font-size: 0.9rem;
color: var(--gray-color);
margin-bottom: 0.25rem;
}
.url-card .des h2 {
font-size: 1.2rem;
font-weight: 600;
}
.url-card .img {
width: 80px;
height: 80px;
border-radius: var(--border-radius);
overflow: hidden;
flex-shrink: 0;
}
.url-card .img img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 侧边栏 */
.aside_infor {
text-align: center;
margin-bottom: 2rem;
}
.aside_infor .logo {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto 1rem;
background-size: cover;
background-position: center;
position: relative;
border: 4px solid white;
box-shadow: var(--box-shadow);
}
.logo_tips {
position: absolute;
bottom: -10px;
right: -10px;
background-color: var(--primary-color);
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.aside_infor h2 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.aside_infor p {
color: var(--gray-color);
margin-bottom: 1.5rem;
}
.infor {
display: flex;
justify-content: space-around;
margin-bottom: 1.5rem;
}
.item p:first-child {
font-size: 0.9rem;
color: var(--gray-color);
}
.item p:last-child {
font-size: 1.2rem;
font-weight: 600;
color: var(--dark-color);
}
.goto {
display: inline-block;
padding: 0.5rem 1.5rem;
background-color: var(--primary-color);
color: white;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 500;
transition: var(--transition);
margin-bottom: 1.5rem;
}
.goto:hover {
background-color: var(--secondary-color);
transform: translateY(-2px);
}
.contact_me {
display: flex;
justify-content: center;
gap: 0.75rem;
}
.image_box {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--light-gray);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.image_box:hover {
background-color: var(--primary-color);
color: white;
transform: translateY(-3px);
}
.image_box svg {
width: 18px;
height: 18px;
}
.card-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--dark-color);
}
.card-title svg {
width: 20px;
height: 20px;
color: var(--primary-color);
}
.content {
font-size: 0.95rem;
color: var(--gray-color);
line-height: 1.7;
}
.content div {
margin-bottom: 0.75rem;
}
.content strong {
color: var(--dark-color);
font-weight: 600;
}
.content center {
margin: 1rem 0;
}
.anno_content {
color: var(--primary-color);
transition: var(--transition);
}
.anno_content:hover {
color: var(--secondary-color);
text-decoration: underline;
}
/* API列表 */
.api-list {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem 4rem;
}
.api-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
.api-card {
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
height: 180px;
transition: var(--transition);
}
.api-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.api-card:hover {
transform: translateY(-5px);
box-shadow: var(--box-shadow-hover);
}
.api-card:hover img {
transform: scale(1.05);
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: white;
padding: 1.5rem;
transform: translateY(100%);
transition: var(--transition);
}
.api-card:hover .overlay {
transform: translateY(0);
}
.overlay h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.overlay p {
font-size: 0.9rem;
opacity: 0.9;
margin-bottom: 0.5rem;
}
/* 页脚 */
.footer {
background-color: var(--dark-color);
color: white;
padding: 3rem 2rem;
text-align: center;
}
.box {
max-width: 1200px;
margin: 0 auto;
}
.text {
font-size: 1rem;
margin-bottom: 1rem;
opacity: 0.8;
}
.icp {
font-size: 0.9rem;
opacity: 0.6;
}
.icp a {
color: white;
margin-left: 0.5rem;
transition: var(--transition);
}
.icp a:hover {
opacity: 1;
text-decoration: underline;
}
/* 浮动按钮 */
.float_button {
position: fixed;
right: 2rem;
bottom: 2rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
z-index: 999;
}
.share, .upward {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--primary-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--box-shadow);
transition: var(--transition);
}
.share:hover, .upward:hover {
background-color: var(--secondary-color);
transform: translateY(-3px);
box-shadow: var(--box-shadow-hover);
}
/* 响应式调整 */
@media (max-width: 768px) {
.header {
padding: 1rem;
}
.bar {
display: none;
}
.main_center {
padding: 5rem 1rem 3rem;
}
.site-title {
font-size: 2rem;
}
.main {
padding: 1rem;
grid-template-columns: 1fr;
}
.api-cards {
grid-template-columns: 1fr;
}
.float_button {
right: 1rem;
bottom: 1rem;
}
}
/* 简约图标样式 */
.icon {
width: 24px;
height: 24px;
fill: currentColor;
}
</style>
</head>
<body>
<!-- 主要内容 -->
<div class="main">
<div class="left">
<!-- 轮播图卡片 -->
<div class="card">
<div class="carousel">
<div class="slides">
<div class="slide">
<a href="https://blog.yilx.net/posts/c72f19f3.html" class="blog-card" target="_blank">
<img class="lazy" data-original="https://api.yilx.net/image/lunbotu/6.jpg" alt="MC开服教程" src="./static/img/lxbg.jpeg">
</a>
</div>
<div class="slide">
<a href="https://blog.yilx.net/posts/MC-/give%20nbt.html" class="blog-card" target="_blank">
<img class="lazy" data-original="https://yilx.net/static/img/lxbg.jpeg" alt="使用/give获取特殊nbt物品" src="https://yilx.net/static/img/lxbg.jpeg">
</a>
</div>
<div class="slide">
<a href="http://localhost/static/img/tx.jpg" class="blog-card" target="_blank">
<img class="lazy" data-original="http://localhost/static/img/tx.jpg" alt="标题3" src="./static/img/lxbg.jpeg">
</a>
</div>
</div>
<div class="text-content">
<div class="text-slide">
<p class="date">2025-04-21</p>
<p class="excerpt">我的世界1.20.1Paper插件服务器搭建教程</p>
<h2 class="title">MC开服教程</h2>
<a href="https://blog.yilx.net/posts/c72f19f3.html" class="button">立即前往</a>
</div>
<div class="text-slide">
<p class="date">2025-4-18</p>
<p class="excerpt">我的世界 /give指令及NBT标签</p>
<h2 class="title">使用/give获取特殊nbt物品</h2>
<a href="https://blog.yilx.net/posts/MC-/give%20nbt.html" class="button">立即前往</a>
</div>
<div class="text-slide active">
<p class="date">2024.0000</p>
<p class="excerpt">描述</p>
<h2 class="title">标题3</h2>
<a href="http://localhost/static/img/tx.jpg" class="button">立即前往</a>
</div>
</div>
<div class="dots"><button class="dot"></button><button class="dot"></button><button class="dot active"></button></div>
</div>
</div>
<!-- 音乐播放器 -->
<div class="music-player">
<audio id="myAudio" src="https://api.yilx.net/music/Hyper-energetic-ACG"></audio>
<div class="cover">
<img class="lazy" data-original="https://api.yilx.net/img/pm" alt="专辑封面" src="https://api.yilx.net/img/pm">
</div>
<p>随机音乐</p>
<div class="controls">
<button class="play-pause-btn">
<span class="play-icon">▶</span>
<span class="pause-icon">❚❚</span>
</button>
</div>
</div>
<!-- 个人空间卡片 -->
<a href="https://b23.tv/pDBTVlx" class="url-card">
<div class="des">
<svg class="icon" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
</svg>
<p>伊linxiyy的个人空间</p>
<h2>个人空间</h2>
</div>
<div class="img">
<img class="lazy" data-original="http://api.yilx.net/upload/1742113422170.png" alt="" src="./static/img/lxbg.jpeg">
</div>
</a>
</div>
<!-- 右侧侧边栏 -->
<div class="right">
<div class="card">
<h2>林熙</h2>
<p>风带来故事的种子，时间使之发芽。</p>
<div class="infor">
<div class="item">
<p>网站</p>
<p>4</p>
</div>
<div class="item">
<p>项目</p>
<p>2</p>
</div>
<div class="item">
<p>分类</p>
<p>2</p>
</div>
</div>
<a href="https://blog.yilx.net/" class="goto">前往博客</a>
<span class="contact_me">
<a class="image_box" href="https://github.com/linxiqt/homepage" target="_blank">
<svg class="icon" viewBox="0 0 24 24">
<path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.167 6.839 9.49.5.09.682-.217.682-.48 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.268 2.75 1.025A9.564 9.564 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.293 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.577.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"/>
</svg>
</a>
<a class="image_box" href="https://www.zhihu.com/people/96-7-7-77-86" target="_blank">
<svg class="icon" viewBox="0 0 24 24">
<path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
</svg>
</a>
<a class="image_box" href="mailto:lx@yilx.net" target="_blank">
<svg class="icon" viewBox="0 0 24 24">
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
</svg>
</a>
</span>
</div>
<div class="card">
<div class="card-title">
<svg class="icon" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
</svg>公告栏
</div>
<div class="content">
<center><b>--- 主域名 ---<br><a target="_blank" rel="noopener" href="https://yilx.net" title="此线路部署于Vercel" class="anno_content"><font color="#5ea6e5">yilx.net</font></a> | <a target="_blank" rel="noopener" href="https://yilx.cc" title="此线路部署于Vercel" class="anno_content"><font color="#5ea6e5">yilx.cc</font></a><br>--- 备用域名 ---<br><a target="_blank" rel="noopener" href="https://blog2.yilx.net" title="此线路部署于雨云服务器" class="anno_content"><font color="#5ea6e5">blog2.yilx.net</font></a><br><a target="_blank" rel="noopener" href="https://cloudflare.yilx.net" title="此线路部署于Cloudflare" class="anno_content"><font color="#5ea6e5">cloudflare.yilx.net</font></a><br>--- 网站安卓APP ---<br>🍧<a target="_blank" rel="noopener" href="https://pan.yilx.net/d/%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%9B%98/web/%E7%BD%91%E7%AB%99app%E6%89%93%E5%8C%85/YILXIY%E3%81%AEblog_YILXIY.apk?sign=Oa--cjCYECwbu539-WeiVS9LaYdp68Vh4H4y6BJ-zhs=:0" title="点这里可以下载网站的安卓APP" class="anno_content"><font color="#5ea6e5">点此下载</font></a>🍧</b></center>
</div>
</div>
<div class="card">
<div class="card-title">
<svg class="icon" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
</svg>本站信息
</div>
<div class="content">
<div>本站总访客量：3253次</div>
<div>今日访客量：221次</div>
<div>项目/网站总数：6</div>
<div>已经有<strong>22</strong>位小伙伴入驻本站啦！</div>
</div>
</div>
</div>
</div>
<!-- API列表 -->
<div class="api-list">
<div class="api-cards">
<a class="api-card" target="_blank" href="https://blog.yilx.net">
<img class="lazy" data-original="http://api.yilx.net/upload/1742118988976.jpg" alt="" src="./static/img/lxbg.jpeg">
<div class="overlay">
<h3>博客</h3>
<p>记录摆烂日常</p>
<p>site</p>
</div>
</a>
<a class="api-card" target="_blank" href="https://api.yilx.net">
<img class="lazy" data-original="https://api.yilx.net/img/pc" alt="" src="https://api.yilx.net/img/pc">
<div class="overlay">
<h3>API站</h3>
<p>api站点/图床/统计</p>
<p>site</p>
</div>
</a>
<a class="api-card" target="_blank" href="https://nb.pan.yilx.net">
<img class="lazy" data-original="http://api.yilx.net/upload/1742130278110.jpg" alt="" src="./static/img/lxbg.jpeg">
<div class="overlay">
<h3>网盘</h3>
<p>资源下载站</p>
<p>site</p>
</div>
</a>
<a class="api-card" target="_blank" href="https://yilx.net">
<img class="lazy" data-original="http://api.yilx.net/upload/1743067883203.jpg" alt="" src="./static/img/lxbg.jpeg">
<div class="overlay">
<h3>YILXIYの主页</h3>
<p>本站同款（新）</p>
<p>project</p>
</div>
</a>
<a class="api-card" target="_blank" href="https://github.com/linxiqt/homepage">
<img class="lazy" data-original="https://api.yilx.net/upload/1741001197606.jpg" alt="" src="./static/img/lxbg.jpeg">
<div class="overlay">
<h3>YILXIY主页(旧)</h3>
<p>本站同款（旧）</p>
<p>project</p>
</div>
</a>
<a class="api-card" target="_blank" href="https://dl.pm.yilx.cc">
<img class="lazy" data-original="http://api.yilx.net/upload/1741769788550.jpg" alt="" src="./static/img/lxbg.jpeg">
<div class="overlay">
<h3>极简php下载站</h3>
<p>一款由伊linxiyy开发的下载站程序</p>
<p>project</p>
</div>
</a>
</div>
</div>
<!-- 浮动按钮 -->
<div class="float_button">
<div class="share">
<svg class="icon" viewBox="0 0 24 24">
<path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
</svg>
</div>
<div class="upward" style="display: flex;">
<svg class="icon" viewBox="0 0 24 24">
<path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/>
</svg>
</div>
</div>
<script>
// 音乐播放器控制
const audio = document.getElementById('myAudio');
const playPauseBtn = document.querySelector('.play-pause-btn');
playPauseBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playPauseBtn.classList.add('playing');
} else {
audio.pause();
playPauseBtn.classList.remove('playing');
}
});
// 返回顶部按钮
const upwardBtn = document.querySelector('.upward');
upwardBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
upwardBtn.style.display = 'flex';
} else {
upwardBtn.style.display = 'none';
}
});
// 图片懒加载
document.addEventListener('DOMContentLoaded', function() {
const lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
if ('IntersectionObserver' in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.original;
lazyImage.classList.remove('lazy');
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// 不支持IntersectionObserver的备用方案
lazyImages.forEach(function(lazyImage) {
lazyImage.src = lazyImage.dataset.original;
lazyImage.classList.remove('lazy');
});
}
});
// 轮播图控制
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const textSlides = document.querySelectorAll('.text-slide');
const dots = document.querySelectorAll('.dot');
function showSlide(n) {
slides.forEach(slide => slide.style.display = 'none');
textSlides.forEach(slide => slide.classList.remove('active'));
dots.forEach(dot => dot.classList.remove('active'));
currentSlide = (n + slides.length) % slides.length;
slides[currentSlide].style.display = 'block';
textSlides[currentSlide].classList.add('active');
dots[currentSlide].classList.add('active');
}
dots.forEach((dot, index) => {
dot.addEventListener('click', () => {
showSlide(index);
});
});
// 自动轮播
setInterval(() => {
showSlide(currentSlide + 1);
}, 5000);
showSlide(0);
</script>
</body>
</html>
index.html
style.css
index.js