当前位置：首页 > news >正文

超详细超实用！！！AI编程之cursor编写官网新增轮播效果（三）

news 2024/9/23 16:40:47

云风网
云风笔记
云风知识库

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>&copy; 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'); // 调试信息
});