我会分步为你讲解,并提供一个可以直接复制使用的完整代码。
（图片来源网络，侵删）
最终效果预览
我们将创建一个简单的页面,包含：
- 图片展示区：使用现代化的轮播图（Gallery）来展示多张图片,用户可以点击左右箭头或缩略图来切换。
- 代码展示区：展示一段带有语法高亮的 HTML 代码,让代码清晰易读。
- 响应式设计：页面在不同设备（电脑、平板、手机）上都能良好显示。
第一步：准备工作
你需要准备以下文件,并将它们放在同一个文件夹里：
- HTML 文件：命名为
index.html。 - CSS 文件：命名为
style.css。 - JavaScript 文件：命名为
script.js。 - 几张图片：为了演示，你可以从网上下载几张图片，或者使用我提供的示例图片链接，将图片命名为
img1.jpg,img2.jpg,img3.jpg，并放在一个名为images的文件夹里。
文件结构如下：
my-website/
├── index.html
├── style.css
├── script.js
└── images/
├── img1.jpg
├── img2.jpg
└── img3.jpg第二步：编写 HTML 代码 (index.html)
HTML 是网页的骨架，我们在这里构建页面的基本结构，包括标题、图片展示区和代码展示区。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">图片与代码展示</title>
<!-- 1. 引入 Prism.js 的 CSS 文件，用于代码高亮 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
<!-- 2. 引入我们自己的 CSS 文件 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>我的作品展示</h1>
<!-- 图片展示区 -->
<section class="gallery-section">
<h2>图片轮播</h2>
<div class="gallery-container">
<div class="gallery">
<div class="gallery-item active">
<img src="images/img1.jpg" alt="图片 1">
</div>
<div class="gallery-item">
<img src="images/img2.jpg" alt="图片 2">
</div>
<div class="gallery-item">
<img src="images/img3.jpg" alt="图片 3">
</div>
</div>
<!-- 左右切换箭头 -->
<button class="prev-btn">❮</button>
<button class="next-btn">❯</button>
<!-- 缩略图指示器 -->
<div class="thumbnails">
<span class="thumb active" data-index="0"><img src="images/img1.jpg" alt="缩略图 1"></span>
<span class="thumb" data-index="1"><img src="images/img2.jpg" alt="缩略图 2"></span>
<span class="thumb" data-index="2"><img src="images/img3.jpg" alt="缩略图 3"></span>
</div>
</div>
</section>
<!-- 代码展示区 -->
<section class="code-section">
<h2>示例代码</h2>
<p>下面是一个简单的 HTML 表单代码示例：</p>
<pre><code class="language-html">
<form action="/submit" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="user_name" required>
<label for="email">邮箱:</label>
<input type="email" id="email" name="user_email" required>
<button type="submit">提交</button>
</form>
</code></pre>
</section>
</div>
<!-- 3. 引入 Prism.js 的 JavaScript 文件，用于激活代码高亮 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js"></script>
<!-- 4. 引入我们自己的 JavaScript 文件 -->
<script src="script.js"></script>
</body>
</html>
代码解释：
<head>部分：我们引入了Prism.js的 CSS 和 JS 文件，这是一个非常流行的代码高亮库，我们还引入了我们即将编写的style.css。<body>部分：.gallery-container：这是图片轮播的容器，包含主图、箭头和缩略图。.gallery：存放所有图片，通过 CSS 控制只显示一张。.thumbnails：底部的缩略图,点击可以切换图片。<pre><code class="language-html">...</code></pre>：这是代码展示的标准结构。<pre>保留格式，<code>标记代码内容，class="language-html"告诉 Prism.js 这是 HTML 代码,以便应用正确的语法高亮。
<body>底部：我们引入了Prism.js的 JS 文件来激活高亮功能，以及我们自己的script.js来处理轮播图的交互逻辑。
第三步：编写 CSS 代码 (style.css)
CSS 负责美化我们的网页,让布局和样式看起来更专业。
/* --- 全局样式和变量 --- */
:root {
--primary-color: #333;
--secondary-color: #f4f4f4;
--accent-color: #007bff;
--transition-speed: 0.3s;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
background-color: #fff;
color: var(--primary-color);
margin: 0;
padding: 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 20px;
}
h1, h2 {
color: var(--primary-color);
text-align: center;
}
/* --- 图片轮播样式 --- */
.gallery-container {
position: relative;
max-width: 800px;
margin: 0 auto;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.gallery {
display: flex;
transition: transform var(--transition-speed) ease-in-out;
}
.gallery-item {
min-width: 100%;
position: relative;
}
.gallery-item img {
width: 100%;
height: 450px;
object-fit: cover; /* 保证图片不变形 */
display: block;
}
/* 左右箭头样式 */
.prev-btn, .next-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
font-size: 24px;
padding: 15px 20px;
cursor: pointer;
border-radius: 50%;
transition: background-color var(--transition-speed);
}
.prev-btn {
left: 10px;
}
.next-btn {
right: 10px;
}
.prev-btn:hover, .next-btn:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* 缩略图样式 */
.thumbnails {
display: flex;
justify-content: center;
padding: 10px;
gap: 10px;
background-color: var(--secondary-color);
}
.thumb {
cursor: pointer;
opacity: 0.6;
transition: opacity var(--transition-speed);
border-radius: 5px;
overflow: hidden;
}
.thumb img {
width: 80px;
height: 60px;
object-fit: cover;
display: block;
}
.thumb.active {
opacity: 1;
border: 2px solid var(--accent-color);
}
.thumb:hover {
opacity: 1;
}
/* --- 代码展示区样式 --- */
.code-section {
margin-top: 50px;
padding: 20px;
background-color: #2d2d2d;
border-radius: 8px;
}
.code-section p {
color: #ccc;
text-align: center;
}
pre {
margin: 20px 0;
padding: 20px;
border-radius: 5px;
overflow-x: auto; /* 允许横向滚动，防止代码溢出 */
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
body {
padding: 10px;
}
.gallery-container {
max-width: 100%;
}
.gallery-item img {
height: 300px;
}
.prev-btn, .next-btn {
padding: 10px 15px;
font-size: 18px;
}
.thumb img {
width: 60px;
height: 45px;
}
}
CSS 解释：
root：定义了 CSS 变量,方便统一管理颜色和过渡时间。.gallery：使用display: flex让所有图片排成一行。transform属性用于切换显示的图片。.gallery-item：min-width: 100%确保每个图片项占据整个容器的宽度。.prev-btn,.next-btn：使用position: absolute将按钮定位在图片两侧。.thumbnails：使用flex布局水平排列缩略图。.active类：用于标记当前显示的图片和选中的缩略图，我们通过 JS 来动态添加/移除这个类。@media查询：当屏幕宽度小于 768px 时，调整图片高度、按钮大小等,使其在手机上也能正常显示。
第四步：编写 JavaScript 代码 (script.js)
JavaScript 让页面“活”起来，负责处理用户交互,比如点击箭头或缩略图来切换图片。
（图片来源网络，侵删）
document.addEventListener('DOMContentLoaded', () => {
// --- 1. 获取DOM元素 ---
const gallery = document.querySelector('.gallery');
const galleryItems = document.querySelectorAll('.gallery-item');
const thumbnails = document.querySelectorAll('.thumb');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
// --- 2. 初始化状态 ---
let currentIndex = 0;
const totalItems = galleryItems.length;
// --- 3. 核心函数：显示指定索引的图片 ---
const showSlide = (index) => {
// 处理索引超出范围的情况，实现循环效果
if (index < 0) {
currentIndex = totalItems - 1;
} else if (index >= totalItems) {
currentIndex = 0;
} else {
currentIndex = index;
}
// 计算并应用 transform 来移动图片
const translateX = -currentIndex * 100;
gallery.style.transform = `translateX(${translateX}%)`;
// 更新缩略图的激活状态
thumbnails.forEach((thumb, i) => {
thumb.classList.toggle('active', i === currentIndex);
});
};
// --- 4. 事件监听器 ---
// 上一张按钮点击事件
prevBtn.addEventListener('click', () => {
showSlide(currentIndex - 1);
});
// 下一张按钮点击事件
nextBtn.addEventListener('click', () => {
showSlide(currentIndex + 1);
});
// 缩略图点击事件
thumbnails.forEach((thumb) => {
thumb.addEventListener('click', () => {
const index = parseInt(thumb.getAttribute('data-index'));
showSlide(index);
});
});
// 可选：添加自动轮播功能
// let autoSlideInterval = setInterval(() => {
// showSlide(currentIndex + 1);
// }, 5000); // 每5秒切换一次
// 鼠标悬停时暂停自动轮播
// const galleryContainer = document.querySelector('.gallery-container');
// galleryContainer.addEventListener('mouseenter', () => {
// clearInterval(autoSlideInterval);
// });
// galleryContainer.addEventListener('mouseleave', () => {
// autoSlideInterval = setInterval(() => {
// showSlide(currentIndex + 1);
// }, 5000);
// });
});
JavaScript 解释：
DOMContentLoaded：确保整个 HTML 文档加载完毕后再执行 JS 代码,避免找不到元素。querySelector/querySelectorAll：用于获取页面上的 DOM 元素。showSlide(index)函数：这是核心逻辑，它根据传入的index计算出transform的值，从而移动图片组，它会更新缩略图的active样式。- 事件监听：为左右箭头和每个缩略图添加
click事件，当被点击时调用showSlide函数。 - 循环逻辑：
if (index < 0)和if (index >= totalItems)处理了到达第一张或最后一张时的循环逻辑。 - （可选）自动轮播：我注释掉了自动轮播的代码，你可以取消注释来启用这个功能，它会每隔5秒自动切换一张图片,并且当鼠标悬停在轮播图上时会暂停。
如何运行
- 将以上四部分代码分别保存到对应的文件中。
- 确保你的图片路径正确（
images/img1.jpg等）。 - 用浏览器（如 Chrome, Firefox, Edge）打开
index.html文件。
你就可以看到一个功能完整、美观且响应式的图片与代码展示网页了！你可以基于这个模板进行修改和扩展。
