index.html内容如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的官方网站</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="page-container">
<header>
<nav>
<div class="nav-container">
<ul>
<li><a href="#home" class="nav-link active">首页</a></li>
<li><a href="#about" class="nav-link">关于我们</a></li>
<li><a href="#services" class="nav-link">服务</a></li>
<li><a href="#contact" class="nav-link">联系我们</a></li>
</ul>
</div>
</nav>
</header>
<main>
<section id="home" class="content-section active">
<div class="background-slideshow">
<button class="slide-nav prev" id="prevButton"></button>
<button class="slide-nav next" id="nextButton"></button>
<div class="slide-thumbnails"></div>
<!-- 幻灯片将由 JavaScript 动态创建 -->
</div>
<div class="content">
<h1>欢迎来到我的官方网站</h1>
<p>这里是网站的主页内容。我们提供优质的服务和产品。</p>
</div>
</section>
<section id="about" class="content-section">
<h1>关于我们</h1>
<p>我们是一家致力于创新和卓越的公司,拥有多年的行业经验。</p>
</section>
<section id="services" class="content-section">
<h1>我们的服务</h1>
<ul>
<li>网站开发</li>
<li>移动应用程序开发</li>
<li>UI/UX 设计</li>
<li>数字营销</li>
</ul>
</section>
<section id="contact" class="content-section">
<h1>联系我们</h1>
<p>电话:123-456-7890</p>
<p>邮箱:info@example.com</p>
<p>地址:中国北京市朝阳区123号</p>
</section>
</main>
<footer>
<p>© 2023 我的官方网站。保留所有权利。</p>
</footer>
</div>
<script src="index.js"></script>
</body>
</html>
styles.css内容如下:
/* 在文件开头添加以下样式 */
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
}
.page-container {
height: 100%;
width: 100%;
overflow: hidden;
position: fixed;
}
/* 修改 main 样式 */
main {
flex: 1;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
/* 修改 #home 样式 */
#home {
position: fixed; /* 改为 fixed */
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
touch-action: none; /* 禁止触摸滑动 */
}
/* 修改 .content-section 样式 */
.content-section {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
padding: 20px;
}
/* 添加以下样式来禁用触摸设备的滑动 */
* {
touch-action: none;
-webkit-overflow-scrolling: none;
overflow-scrolling: none;
}
/* 保留其他现有样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
overflow-x: hidden; /* 防止横向滚动 */
}
nav {
background-color: #333;
padding: 10px 0;
}
.nav-container {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}
nav ul li {
position: relative;
margin: 0 10px;
}
nav ul li a {
color: white;
text-decoration: none;
padding: 10px 15px;
display: block;
transition: all 0.3s ease;
}
nav ul li a:hover,
nav ul li a.active {
background-color: #555;
color: #ffd700;
}
nav ul li a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #ffd700;
transition: width 0.3s ease;
}
nav ul li a:hover::after,
nav ul li a.active::after {
width: 100%;
}
main {
flex: 1;
width: 100%;
max-width: 100%; /* 确保不超出视口宽度 */
margin: 0 auto;
padding: 0;
overflow-y: auto;
overflow-x: hidden; /* 防止横向滚动 */
}
h1 {
color: #333;
}
.content-section {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: auto;
/* 移除背景色 */
padding: 20px;
}
.content-section.active {
display: block;
}
@media (max-width: 600px) {
nav ul {
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 5px 0;
}
nav ul li a {
padding: 10px 20px;
}
}
/* 保留之前的样式,并在文件末尾添加以下内容 */
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.page-container {
display: flex;
flex-direction: column;
height: 100vh;
}
/* 头部样式 */
header {
background-color: rgba(51, 51, 51, 0.8); /* 半透明背景 */
padding: 10px 0;
z-index: 10;
}
/* 首页样式 */
#home {
position: fixed; /* 改为 fixed */
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
touch-action: none; /* 禁止触摸滑动 */
}
.background-slideshow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* 修改为正数,但要低于按钮的 z-index */
overflow: hidden;
touch-action: none; /* 禁止触摸滑动 */
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0; /* 确保在 .background-slideshow 之下 */
touch-action: none; /* 禁止触摸滑动 */
}
.content {
position: relative;
z-index: 1;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* 保留文字阴影以确保可读性 */
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
overflow: hidden; /* 防止内容溢出 */
touch-action: none; /* 禁止触摸滑动 */
}
#home h1 {
color: white;
font-size: 2.5em;
margin-bottom: 20px;
}
/* 其他内容部分样式 */
#about, #services, #contact {
max-width: 800px;
width: 100%;
margin: 0 auto;
padding: 20px;
box-sizing: border-box; /* 确保padding不会增加元素的总宽度 */
/* 移除背景色 */
color: white; /* 确保文字在深色背景上可见 */
text-shadow: 1px 1px 2px rgba(0,0,0,0.7); /* 添加文字阴影以提高可读性 */
}
/* 底部样式 */
footer {
background-color: rgba(51, 51, 51, 0.8); /* 半透明背景 */
color: white;
text-align: center;
padding: 10px 0;
width: 100%;
z-index: 10;
}
/* 响应式设计 */
@media (max-width: 600px) {
nav ul {
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 5px 0;
}
nav ul li a {
padding: 10px 20px;
}
}
/* 移除滚动条样式(可选) */
::-webkit-scrollbar {
display: none;
}
* {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* 添加以下新样式 */
#home {
position: fixed; /* 改为 fixed */
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
touch-action: none; /* 禁止触摸滑动 */
}
.background-slideshow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* 修改为正数,但要低于按钮的 z-index */
overflow: hidden;
touch-action: none; /* 禁止触摸滑动 */
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0; /* 确保在 .background-slideshow 之下 */
touch-action: none; /* 禁止触摸滑动 */
}
.content {
position: relative;
z-index: 1;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* 保留文字阴影以确保可读性 */
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
overflow: hidden; /* 防止内容溢出 */
touch-action: none; /* 禁止触摸滑动 */
}
#home h1 {
color: white;
font-size: 2.5em;
margin-bottom: 20px;
}
/* 添加媒体查询以处理不同的屏幕尺寸 */
@media (max-aspect-ratio: 16/9) {
.slide {
background-size: cover;
}
}
@media (min-aspect-ratio: 16/9) {
.slide {
background-size: cover;
}
}
/* 确保 main 不会影响全屏显示 */
main {
flex: 1;
width: 100%;
max-width: 100%; /* 确保不超出视口宽度 */
margin: 0;
padding: 0;
overflow-y: auto;
overflow-x: hidden; /* 防止横向滚动 */
position: relative; /* 添加这行 */
}
/* 调整其他部分的样式以适应全屏背景 */
#about, #services, #contact {
max-width: 800px;
width: 100%;
margin: 0 auto;
padding: 20px;
box-sizing: border-box; /* 确保padding不会增加元素的总宽度 */
/* 移除背景色 */
color: white; /* 确保文字在深色背景上可见 */
text-shadow: 1px 1px 2px rgba(0,0,0,0.7); /* 添加文字阴影以提高可读性 */
}
/* 确保 .content-section 不添加背景 */
.content-section {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: auto;
padding: 20px;
/* 移除任何背景色 */
}
/* ... 保留后面的样式 ... */
/* 添加以下样式到文件末尾 */
/* 轮播按钮样式 */
.slide-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
z-index: 100;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: background 0.3s ease;
padding: 0; /* 移除内边距 */
}
.slide-nav:hover {
background: rgba(0, 0, 0, 0.8);
}
.slide-nav.prev {
left: 20px;
cursor: pointer;
}
.slide-nav.next {
right: 60px;
cursor: pointer;
}
/* 移除之前的 ::before 伪元素 */
/* 调整按钮内容的位置 */
.slide-nav.prev::after {
content: '\2039'; /* 左箭头 Unicode */
}
.slide-nav.next::after {
content: '\203A'; /* 右箭头 Unicode */
}
/* 缩略图容器样式 */
.slide-thumbnails {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
z-index: 10;
}
/* 缩略图样式 */
.thumbnail {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
margin: 0 5px;
cursor: pointer;
}
.thumbnail.active {
background: white;
}
index.js内容如下:
document.addEventListener('DOMContentLoaded', function() {
const navLinks = document.querySelectorAll('.nav-link');
const contentSections = document.querySelectorAll('.content-section');
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href').substring(1);
// 移除所有导航链接的 active 类
navLinks.forEach(navLink => {
navLink.classList.remove('active');
});
// 为当前点击的链接添加 active 类
this.classList.add('active');
contentSections.forEach(section => {
if (section.id === targetId) {
section.classList.add('active');
} else {
section.classList.remove('active');
}
});
});
});
// 添加背景图轮播功能
const slideshow = document.querySelector('.background-slideshow');
console.log('Slideshow element:', slideshow); // 调试信息
const prevButton = document.getElementById('prevButton');
const nextButton = document.getElementById('nextButton');
console.log('Prev button:', prevButton); // 调试信息
console.log('Next button:', nextButton); // 调试信息
const thumbnailsContainer = slideshow.querySelector('.slide-thumbnails');
const imgFolder = 'imgs/';
const images = ['bgOne.png', 'bgTwo.png', 'bgTh.png', 'bgF.png'];
let slides = [];
let currentSlide = 0;
function createSlides() {
images.forEach((image, index) => {
const imgSrc = imgFolder + image;
const slide = document.createElement('div');
slide.className = 'slide';
slide.style.backgroundImage = `url('${imgSrc}')`;
slideshow.appendChild(slide);
slides.push(slide);
// 创建缩略图
const thumbnail = document.createElement('div');
thumbnail.className = 'thumbnail';
thumbnail.addEventListener('click', () => goToSlide(index));
thumbnailsContainer.appendChild(thumbnail);
});
console.log('Slides created:', slides.length); // 调试信息
updateSlides();
}
function updateSlides() {
slides.forEach((slide, index) => {
slide.style.opacity = index === currentSlide ? 1 : 0;
});
const thumbnails = thumbnailsContainer.querySelectorAll('.thumbnail');
thumbnails.forEach((thumbnail, index) => {
thumbnail.classList.toggle('active', index === currentSlide);
});
console.log('Current slide:', currentSlide); // 调试信息
}
function nextSlide() {
console.log('Next slide function called'); // 调试信息
currentSlide = (currentSlide + 1) % slides.length;
updateSlides();
}
function prevSlide() {
console.log('Prev slide function called'); // 调试信息
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
updateSlides();
}
function goToSlide(index) {
console.log('Go to slide function called:', index); // 调试信息
currentSlide = index;
updateSlides();
}
// 确保这些事件监听器被正确添加
if (prevButton) {
prevButton.addEventListener('click', function(e) {
e.preventDefault();
console.log('Prev button clicked'); // 调试信息
prevSlide();
});
console.log('Prev button listener added'); // 调试信息
} else {
console.error('Prev button not found'); // 错误信息
}
if (nextButton) {
nextButton.addEventListener('click', function(e) {
e.preventDefault();
console.log('Next button clicked'); // 调试信息
nextSlide();
});
console.log('Next button listener added'); // 调试信息
} else {
console.error('Next button not found'); // 错误信息
}
createSlides();
// 每5秒自动切换幻灯片
setInterval(nextSlide, 3000);
// 添加调试代码
console.log('Script execution completed'); // 调试信息
});
最终网页效果如下