<?php
/*
Template Name: 海人潜水琉球-冲绳首页
Description: 包含导航栏和轮播图的完整首页
*/
?>
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>海人潜水琉球-冲绳 – 首页</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: ‘Microsoft YaHei’, Arial, sans-serif;
background-color: #f5f5f5;
}
/* 导航栏样式 */
.header {
background-color: white;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 15px 0;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.logo {
display: flex;
align-items: center;
text-decoration: none;
}
.logo-img {
height: 50px;
width: auto;
margin-right: 10px;
}
.logo-text {
color: #2c3e50;
font-size: 22px;
font-weight: bold;
}
.nav-menu {
display: flex;
list-style: none;
}
.nav-menu li {
margin: 0 15px;
}
.nav-menu a {
color: #34495e;
text-decoration: none;
font-size: 16px;
font-weight: 500;
padding: 8px 12px;
border-radius: 4px;
transition: all 0.3s ease;
position: relative;
}
.nav-menu a:hover {
color: #3498db;
}
.nav-menu a:hover:after {
content: ”;
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
background-color: #3498db;
}
.reservation-btn {
background-color: #3498db;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s;
}
.reservation-btn:hover {
background-color: #2980b9;
}
.mobile-toggle {
display: none;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #2c3e50;
}
/* 轮播图样式 */
.slider-container {
position: relative;
max-width: 1200px;
margin: 80px auto 0; /* 为固定导航留出空间 */
height: 500px;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
height: 100%;
}
.slide {
min-width: 100%;
height: 100%;
position: relative;
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 60px;
}
.slide-content {
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 20px;
border-radius: 10px;
text-align: center;
max-width: 80%;
}
.slide h2 {
font-size: 28px;
margin-bottom: 10px;
}
.slide p {
font-size: 18px;
margin-bottom: 15px;
}
.slide-btn {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
text-decoration: none;
display: inline-block;
}
.slide-btn:hover {
background-color: #2980b9;
}
.slider-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
padding: 0 20px;
}
.nav-btn {
background: rgba(255, 255, 255, 0.8);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s;
}
.nav-btn:hover {
background: rgba(255, 255, 255, 1);
}
.slider-indicators {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
}
.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: background 0.3s;
}
.indicator.active {
background: white;
}
/* 响应式设计 */
@media (max-width: 768px) {
.mobile-toggle {
display: block;
}
.nav-menu {
position: fixed;
top: 70px;
left: -100%;
width: 100%;
height: calc(100vh – 70px);
background-color: white;
flex-direction: column;
align-items: center;
padding-top: 40px;
transition: all 0.3s ease;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.nav-menu.active {
left: 0;
}
.nav-menu li {
margin: 15px 0;
}
.reservation-btn {
margin-top: 20px;
display: block;
}
.slider-container {
height: 300px;
margin-top: 70px;
}
.slide-content {
padding: 15px;
max-width: 90%;
}
.slide h2 {
font-size: 22px;
}
.slide p {
font-size: 16px;
}
}
</style>
</head>
<body>
<!– 导航栏 –>
<header class=”header”>
<div class=”nav-container”>
<!– 左侧LOGO –>
<a href=”/” class=”logo”>
<!– 这里放置你的LOGO图片 –>
<div style=”width: 50px; height: 50px; background: linear-gradient(135deg, #3498db, #2c3e50); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; margin-right: 10px;”>海人</div>
<div class=”logo-text”>海人潜水琉球-冲绳</div>
</a>
<!– 导航菜单 –>
<ul class=”nav-menu” id=”navMenu”>
<li><a href=”/snorkeling”>浮潜/体验潜水</a></li>
<li><a href=”/diving-courses”>潜水课程</a></li>
<li><a href=”/sea-fishing”>海钓</a></li>
<li><a href=”/about”>关于我们</a></li>
<li><a href=”/contact”>联络我们</a></li>
</ul>
<!– 预约按钮 –>
<a href=”/booking” class=”reservation-btn”>立即预约</a>
<!– 移动端菜单按钮 –>
<button class=”mobile-toggle” id=”mobileToggle”>☰</button>
</div>
</header>
<!– 轮播图 –>
<div class=”slider-container”>
<div class=”slides” id=”slides”>
<!– 第一张幻灯片 – 冲绳海域美景 –>
<div class=”slide” style=”background-image: url(‘https://img.alicdn.com/tfs/TB1LJxKJFXXXXcJXpXXXXXXXXXX-1920-800.jpg’);”>
<div class=”slide-content”>
<h2>探索冲绳绝美海域</h2>
<p>清澈见底的海水，丰富的海洋生物</p>
<a href=”/diving-courses” class=”slide-btn”>了解更多</a>
</div>
</div>
<!– 第二张幻灯片 – 潜水体验 –>
<div class=”slide” style=”background-image: url(‘https://img.alicdn.com/tfs/TB1MkxKJFXXXXcOXVXXXXXXXXXX-1920-800.jpg’);”>
<div class=”slide-content”>
<h2>专业潜水课程</h2>
<p>从初学者到专业级别，全方位培训</p>
<a href=”/diving-courses” class=”slide-btn”>开始学习</a>
</div>
</div>
<!– 第三张幻灯片 – 浮潜体验 –>
<div class=”slide” style=”background-image: url(‘https://img.alicdn.com/tfs/TB1NlXKJFXXXXcoXFXXXXXXXXXX-1920-800.jpg’);”>
<div class=”slide-content”>
<h2>轻松浮潜体验</h2>
<p>无需经验，享受海洋之美</p>
<a href=”/snorkeling” class=”slide-btn”>立即预订</a>
</div>
</div>
<!– 第四张幻灯片 – 海钓活动 –>
<div class=”slide” style=”background-image: url(‘https://img.alicdn.com/tfs/TB1OlXKJFXXXXcpXFXXXXXXXXXX-1920-800.jpg’);”>
<div class=”slide-content”>
<h2>精彩海钓之旅</h2>
<p>与家人朋友共享钓鱼乐趣</p>
<a href=”/sea-fishing” class=”slide-btn”>查看详情</a>
</div>
</div>
<!– 第五张幻灯片 – 专业团队 –>
<div class=”slide” style=”background-image: url(‘https://img.alicdn.com/tfs/TB1PlXKJFXXXXcqXFXXXXXXXXXX-1920-800.jpg’);”>
<div class=”slide-content”>
<h2>专业教练团队</h2>
<p>丰富经验，安全可靠</p>
<a href=”/about” class=”slide-btn”>认识我们</a>
</div>
</div>
</div>
<div class=”slider-nav”>
<button class=”nav-btn” id=”prevBtn”>‹</button>
<button class=”nav-btn” id=”nextBtn”>›</button>
</div>
<div class=”slider-indicators” id=”indicators”>
<div class=”indicator active” data-index=”0″></div>
<div class=”indicator” data-index=”1″></div>
<div class=”indicator” data-index=”2″></div>
<div class=”indicator” data-index=”3″></div>
<div class=”indicator” data-index=”4″></div>
</div>
</div>
<script>
// 移动端菜单切换
const mobileToggle = document.getElementById(‘mobileToggle’);
const navMenu = document.getElementById(‘navMenu’);
mobileToggle.addEventListener(‘click’, () => {
navMenu.classList.toggle(‘active’);
});
// 点击菜单项后关闭移动端菜单
document.querySelectorAll(‘.nav-menu a’).forEach(link => {
link.addEventListener(‘click’, () => {
if (window.innerWidth <= 768) {
navMenu.classList.remove(‘active’);
}
});
});
// 轮播图功能
let currentIndex = 0;
const slides = document.getElementById(‘slides’);
const slideIndicators = document.querySelectorAll(‘.indicator’);
const prevBtn = document.getElementById(‘prevBtn’);
const nextBtn = document.getElementById(‘nextBtn’);
function updateSlider() {
slides.style.transform = `translateX(-${currentIndex * 100}%)`;
// 更新指示器
slideIndicators.forEach((indicator, index) => {
if (index === currentIndex) {
indicator.classList.add(‘active’);
} else {
indicator.classList.remove(‘active’);
}
});
}
function nextSlide() {
currentIndex = (currentIndex + 1) % slideIndicators.length;
updateSlider();
}
function prevSlide() {
currentIndex = (currentIndex – 1 + slideIndicators.length) % slideIndicators.length;
updateSlider();
}
// 自动播放
let slideInterval = setInterval(nextSlide, 5000);
// 指示器点击事件
slideIndicators.forEach(indicator => {
indicator.addEventListener(‘click’, () => {
clearInterval(slideInterval);
currentIndex = parseInt(indicator.getAttribute(‘data-index’));
updateSlider();
slideInterval = setInterval(nextSlide, 5000);
});
});
// 上一页/下一页按钮事件
nextBtn.addEventListener(‘click’, () => {
clearInterval(slideInterval);
nextSlide();
slideInterval = setInterval(nextSlide, 5000);
});
prevBtn.addEventListener(‘click’, () => {
clearInterval(slideInterval);
prevSlide();
slideInterval = setInterval(nextSlide, 5000);
});
// 鼠标悬停暂停自动播放
const sliderContainer = document.querySelector(‘.slider-container’);
sliderContainer.addEventListener(‘mouseenter’, () => {
clearInterval(slideInterval);
});
sliderContainer.addEventListener(‘mouseleave’, () => {
slideInterval = setInterval(nextSlide, 5000);
});
</script>
</body>
</html>