旅游网站景点图片画廊 CSS 搭建实战
随着互联网技术的飞速发展，旅游网站已经成为人们获取旅游信息、规划行程的重要渠道。一个美观、实用的景点图片画廊对于提升旅游网站的吸引力至关重要。本文将围绕CSS语言，通过实战案例，详细介绍如何搭建一个旅游网站景点图片画廊。
一、项目背景
本案例旨在搭建一个简洁、美观的旅游网站景点图片画廊，要求实现以下功能：
1. 展示景点图片，支持鼠标悬停显示图片标题和简介。
2. 图片自动轮播，每隔一定时间自动切换到下一张图片。
3. 支持图片点击放大查看，方便用户查看图片细节。
4. 图片画廊具有响应式设计，适应不同屏幕尺寸。
二、技术选型
1. HTML：用于搭建页面结构。
2. CSS：用于美化页面样式，实现图片画廊效果。
3. JavaScript：用于实现图片轮播、点击放大等功能。
三、代码实现
1. 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>旅游网站景点图片画廊</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gallery-container">
<div class="gallery">
<div class="gallery-item">
<img src="image1.jpg" alt="景点1">
<div class="gallery-info">
<h3>景点1</h3>
<p>这里是景点1的简介...</p>
</div>
</div>
<!-- ... 其他景点图片 ... -->
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS样式
css
/ styles.css /
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.gallery-container {
width: 80%;
margin: 0 auto;
overflow: hidden;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.gallery-item {
width: 30%;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.gallery-item img {
width: 100%;
height: auto;
transition: transform 0.5s ease;
}
.gallery-info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
color: fff;
padding: 10px;
transform: translateY(100%);
transition: transform 0.5s ease;
}
.gallery-item:hover .gallery-info {
transform: translateY(0);
}
/ ... 其他样式 ... /
@media (max-width: 768px) {
.gallery-item {
width: 48%;
}
}
@media (max-width: 480px) {
.gallery-item {
width: 100%;
}
}
3. JavaScript脚本
javascript
// script.js
let currentIndex = 0;
const galleryItems = document.querySelectorAll('.gallery-item');
const totalItems = galleryItems.length;
function showGalleryItem(index) {
galleryItems.forEach((item, i) => {
item.style.display = i === index ? 'block' : 'none';
});
}
function nextGalleryItem() {
currentIndex = (currentIndex + 1) % totalItems;
showGalleryItem(currentIndex);
}
setInterval(nextGalleryItem, 3000);
// 图片点击放大功能
galleryItems.forEach((item, index) => {
item.addEventListener('click', () => {
const img = item.querySelector('img');
const newImg = img.cloneNode(true);
newImg.style.position = 'fixed';
newImg.style.top = '50%';
newImg.style.left = '50%';
newImg.style.transform = 'translate(-50%, -50%) scale(2)';
document.body.appendChild(newImg);
setTimeout(() => {
document.body.removeChild(newImg);
}, 3000);
});
});
四、总结
本文通过实战案例，详细介绍了如何使用HTML、CSS和JavaScript搭建一个旅游网站景点图片画廊。在实际开发过程中，可以根据需求调整样式和功能，实现更加丰富的效果。希望本文对您有所帮助。
Comments NOTHING