<!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: 'Segoe UI', Tahoma, Geneva, Verdana, sans
-serif;
background: #f0f2f5; /* 简约的浅灰色背景 */
min
-height: 100vh;
display: flex;
justify
-content: center;
align
-items: center;
padding: 0px;
}
/* 轮播主容器 */
.carousel
-container {
max
-width: 80%;
width: 100%;
overflow: hidden;
border
-radius: 12px;
box
-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* 微妙的阴影 */
margin: 0 auto;
}
/* 轮播轨道 */
.carousel {
display: flex;
transition: transform 0.6s cubic
-bezier(0.25, 0.1, 0.25, 1);
height: 400px;
}
/* 轮播项 */
.carousel
-item {
min
-width: 25%; /* 默认每屏显示4张 */
height: 100%;
position: relative;
overflow: hidden;
transition: transform 0.3s;
}
/* 图片悬停效果 */
.carousel
-item:hover {
transform: scale(1.03);
z
-index: 2;
}
/* 图片样式 */
.carousel
-item img {
width: 100%;
height: 100%;
object
-fit: cover;
display: block;
}
/* 图片信息面板 */
.
image-info {
position: absolute;
height: 190px; /* 统一高度 */
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 15px;
transform: translateY(0);
transition: transform 0.3s ease;
}
/* 悬停时显示信息 */
.carousel
-item:hover .
image-info {
transform: translateY(100%);
}
/* 信息标题 */
.
image-info h3 {
margin
-bottom: 5px;
font
-size: 1.1rem;
font
-weight: 600;
}
/* 信息描述 */
.
image-info p {
font
-size: 0.9rem;
opacity: 0.9;
}
/* 控制按钮容器 */
.carousel
-controls {
display: flex;
justify
-content: center;
gap: 15px;
margin
-top: 25px;
}
/* 简约按钮样式 */
.control
-btn {
background: #000;
color: #fff;
border: 2px solid #e0e0e0;
padding: 10px 25px;
border
-radius: 8px;
cursor: pointer;
font
-size: 0.95rem;
font
-weight: 600;
transition: all 0.3s;
min
-width: 120px;
}
/* 按钮悬停效果 */
.control
-btn:hover {
background: #fff;
border
-color: #000;
color: #000;
}
/* 按钮活动状态 */
.control
-btn:active {
transform: translateY(1px);
}
/* 指示器容器 */
.indicator {
display: flex;
justify
-content: center;
gap: 10px;
margin
-top: 20px;
padding: 5px;
}
/* 指示点样式 */
.indicator
-dot {
width: 12px;
height: 12px;
border
-radius: 50%;
background: #fff;
cursor: pointer;
transition: all 0.3s;
}
/* 当前激活的指示点 */
.indicator
-dot.active {
background: #000;
transform: scale(1.2);
}
/* 响应式设计 */
@media (max
-width: 900px) {
.carousel
-item {
min
-width: 33.333%; /* 中等屏幕每屏显示3张 */
}
}
@media (max
-width: 700px) {
.carousel
-item {
min
-width: 50%; /* 小屏幕每屏显示2张 */
}
.carousel {
height: 350px;
}
}
@media (max
-width: 500px) {
.carousel
-item {
min
-width: 100%; /* 超小屏幕每屏显示1张 */
}
.carousel {
height: 300px;
}
.carousel
-controls {
flex
-wrap: wrap;
}
.control
-btn {
min
-width: 100px;
padding: 8px 15px;
}
}
</style>
</
head>
<body>
<!
-- 轮播主容器
-->
<div class="carousel
-container">
<!
-- 轮播轨道
-->
<div class="carousel">
<!
-- 轮播项1
-->
<div class="carousel
-item">
<img src="https://www.fetchingpack.com/wp
-content/uploads/2025/06/Lamination
-Gloss_Matte1_compressed.png" alt="Lamination (Gloss/Matte)">
<div class="
image-info">
<h3>Lamination (Gloss/Matte)</h3>
<p>– Applying a thin plastic film over the printed sheet to enhance scratch resistance, moisture protection and overall durability. Gloss lamination yields a shiny surface, while matte lamination gives a low
-sheen, soft
-touch effect.</p>
</div>
</div>
<!
-- 轮播项2
-->
<div class="carousel
-item">
<img src="https://www.fetchingpack.com/wp
-content/uploads/2025/06/UV
-Coating
-Spot_Overall_compressed.png" alt="UV Coating (Spot/Overall)">
<div class="
image-info">
<h3>UV Coating (Spot/Overall)</h3>
<p>– Spreading a liquid UV
-curable varnish onto either selected areas (spot UV) or the entire sheet, then instantly curing it under UV light. Creates high gloss and tactile contrast.</p>
</div>
</div>
<!
-- 轮播项3
-->
<div class="carousel
-item">
<img src="https://www.fetchingpack.com/wp
-content/uploads/2025/06/Hot
-Foil
-Stamping_compressed.png" alt="Hot Foil Stamping">
<div class="
image-info">
<h3>Hot Foil Stamping</h3>
<p>– Transferring metallic or pigmented foil onto specific areas of the print using heat and pressure. Delivers a premium metallic sheen (gold, silver, colored foils) for logos or decorative accents.</p>
</div>
</div>
<!
-- 轮播项4
-->
<div class="carousel
-item">
<img src="https://www.fetchingpack.com/wp
-content/uploads/2025/06/Embossing
-_
-Debossing1_compressed.png" alt="Embossing / Debossing">
<div class="
image-info">
<h3>Embossing / Debossing</h3>
<p>– Pressing the paper between male and female dies to create a raised (emboss) or recessed (deboss) 3D relief. Adds tactile interest and a sense of depth.</p>
</div>
</div>
<!
-- 轮播项5
-->
<div class="carousel
-item">
<img src="https://www.fetchingpack.com/wp
-content/uploads/2025/06/Die
-Cutting_compressed.png" alt="Die
-Cutting">
<div class="
image-info">
<h3>Die
-Cutting</h3>
<p>– Using a custom
-made metal die to cut the printed sheet
into precise shapes or create windows/slots. Essential for producing custom box shapes, hang
-tabs, or intricate cut
-outs.</p>
</div>
</div>
<!
-- 轮播项6
-->
<div class="carousel
-item">
<img src="https://www.fetchingpack.com/wp
-content/uploads/2025/06/Creasing
-Folding
-Crease_compressed.png" alt="Creasing (Folding Crease)">
<div class="
image-info">
<h3>Creasing (Folding Crease)</h3>
<p>– Impressing a crease line on the sheet to facilitate clean, accurate folds without cracking the coating or ink. Critical for boxes, folders, and other folded structures.</p>
</div>
</div>
<!
-- 轮播项7
-->
<div class="carousel
-item">
<img src="https://www.fetchingpack.com/wp
-content/uploads/2025/06/Spot
-UV
-Emboss
-Combination_compressed.png" alt="Spot UV + Emboss Combination">
<div class="
image-info">
<h3>Spot UV + Emboss Combination</h3>
<p>–
First applying spot UV coating, then embossing the same area to create a shiny, raised element. Enhances both visual shine and tactile relief simultaneously.</p>
</div>
</div>
<!
-- 轮播项8
-->
<div class="carousel
-item">
<img src="https://www.fetchingpack.com/wp
-content/uploads/2025/06/Laser
-Finishing
-Holographic
-Etch
-Combination_compressed.png" alt="Laser Finishing + Holographic Etch Combination">
<div class="
image-info">
<h3>Laser Finishing + Holographic Etch Combination</h3>
<p>–
First using a focused laser beam to engrave microscopic holographic patterns onto foil or film, then sealing the treated surface through heat or UV curing to lock in the effect.
Creates vivid, color
-shifting visuals that shimmer with every change in viewing angle and imparts subtle textural relief, adding a futuristic premium look and an effective anti
-counterfeiting feature.</p>
<p>• Pearlescent varnish for shimmering, iridescent highlights</p>
<p>• Matte varnish for a soft, low
-gloss finish</p>
<p>• Scented varnish that releases fragrance when touched</p>
</div>
</div>
</div>
<!
-- 控制按钮
-->
<div class="carousel
-controls">
<button class="control
-btn" id="prevBtn">Previous</button>
<button class="control
-btn" id="nextBtn">next</button>
<button class="control
-btn" id="autoBtn">暂停轮播</button>
</div>
<!
-- 指示器
-->
<div class="indicator">
<div class="indicator
-dot active" data
-index="0"></div>
<div class="indicator
-dot" data
-index="1"></div>
<div class="indicator
-dot" data
-index="2"></div>
<div class="indicator
-dot" data
-index="3"></div>
</div>
</div>
<script>
// 当文档加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
// 获取DOM元素
const carousel = document.querySelector('.carousel');
const items = document.querySelectorAll('.carousel
-item');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const autoBtn = document.getElementById('autoBtn');
const dots = document.querySelectorAll('.indicator
-dot');
// 初始化变量
let currentIndex = 0;
let itemsPerView = calculateItemsPerView();
let autoPlayInterval;
let isAutoPlay = true;
// 计算当前视图显示的项目数
function calculateItemsPerView() {
const width = window.innerWidth;
if (width <= 500) return 1;
if (width <= 700) return 2;
if (width <= 900) return 3;
return 4;
}
// 更新轮播位置
function updateCarousel() {
// 计算每个项目的宽度百分比
const itemWidth = 100 / itemsPerView;
// 计算偏移量
const offset =
-currentIndex * itemWidth;
// 应用转换效果
carousel.style.transform = `translateX(${offset}%)`;
// 更新指示点状态
dots.forEach((dot, index) => {
dot.classList.toggle('active', index === currentIndex);
});
}
// 下一张
function nextSlide() {
// 计算最大索引
const maxIndex = items.length
- itemsPerView;
// 更新当前索引（循环）
currentIndex = currentIndex >= maxIndex ? 0 : currentIndex + 1;
updateCarousel();
}
// 上一张
function prevSlide() {
// 计算最大索引
const maxIndex = items.length
- itemsPerView;
// 更新当前索引（循环）
currentIndex = currentIndex <= 0 ? maxIndex : currentIndex
- 1;
updateCarousel();
}
// 自动轮播
function startAutoPlay() {
if (isAutoPlay) {
// 设置轮播间隔
autoPlayInterval = setInterval(nextSlide, 3000);
// 更新按钮文本
autoBtn.textContent = 'stop';
}
}
// 停止自动轮播
function stopAutoPlay() {
// 清除轮播间隔
clearInterval(autoPlayInterval);
// 更新按钮文本
autoBtn.textContent = 'start';
}
// 切换自动轮播状态
function toggleAutoPlay() {
// 反转自动播放状态
isAutoPlay = !isAutoPlay;
if (isAutoPlay) {
startAutoPlay();
} else {
stopAutoPlay();
}
}
// 初始化轮播
function init() {
// 计算每屏显示数量
itemsPerView = calculateItemsPerView();
// 更新轮播位置
updateCarousel();
// 开始自动播放
startAutoPlay();
}
// 事件监听器
nextBtn.addEventListener('click', () => {
nextSlide();
// 如果自动播放已暂停，则停止轮播
if (!isAutoPlay) stopAutoPlay();
});
prevBtn.addEventListener('click', () => {
prevSlide();
// 如果自动播放已暂停，则停止轮播
if (!isAutoPlay) stopAutoPlay();
});
autoBtn.addEventListener('click', toggleAutoPlay);
// 为每个指示点添加点击事件
dots.forEach(dot => {
dot.addEventListener('click', () => {
// 获取并设置当前索引
currentIndex = parseInt(dot.getAttribute('data
-index'));
updateCarousel();
// 如果自动播放已暂停，则停止轮播
if (!isAutoPlay) stopAutoPlay();
});
});
// 窗口大小变化时重新计算
window.addEventListener('resize', () => {
// 重新计算每屏显示数量
itemsPerView = calculateItemsPerView();
// 更新轮播位置
updateCarousel();
});
// 初始化轮播
init();
});
</script>
</body>
</
html>
这个代码为什么修改了网页的字体样式，怎么修改可以让这个代码不影响网页的字体样式
本文详细阐述了网页中图像的正确使用方法，包括浏览器如何处理<img>元素、创建缩略图以提升用户体验、选择合适的图片尺寸、利用相对路径与URL、提供替代文本以及调整图像大小等关键步骤。
扫一扫
4054
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
