<!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-con
trols {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 25px;
}
/* 简约按钮样式 */
.con
trol-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;
}
/* 按钮悬停效果 */
.con
trol-btn:hover {
background: #fff;
border-color: #000;
color: #000;
}
/* 按钮活动状态 */
.con
trol-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-con
trols {
flex-wrap: wrap;
}
.con
trol-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, s
oft-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 eit
her selected areas (spot UV) or the entire sheet, then instantly curing it under UV light
. Creates high gloss and tactile con
trast
.</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 in
tricate 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 ot
her folded s
tructures
.</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 s
oft, low-gloss finish</p>
<p>• Scented varnish that releases fragrance when touched</p>
</div>
</div>
</div>
<!-- 控制按钮 -->
<div class="carousel-con
trols">
<button class="con
trol-btn" id="prevBtn">Previous</button>
<button class="con
trol-btn" id="nextBtn">next</button>
<button class="con
trol-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
.getAt
tribute('data-index'));
updateCarousel();
// 如果自动播放已暂停，则停止轮播
if (!isAutoPlay) stopAutoPlay();
});
});
// 窗口大小变化时重新计算
window
.addEventListener('resize', () => {
// 重新计算每屏显示数量
itemsPerView = calculateItemsPerView();
// 更新轮播位置
updateCarousel();
});
// 初始化轮播
init();
});
</script>
</body>
</html>
这个代码为什么修改了网页的字体样式，怎么修改可以让这个代码不影响网页的字体样式
本文分享了一个发布于2010年10月23日在土豆网上的视频链接。
扫一扫
7516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
