<!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: #f0f2f
5; /* 简约的浅灰色背景 */
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 1
5px rgba
(0, 0, 0, 0.08
); /* 微妙的阴影 */
margin: 0 auto;
}
/* 轮播轨道 */
.carousel {
display: flex;
transition: transform 0.6s cubic-bezier
(0.2
5, 0.1, 0.2
5, 1
);
height: 400px;
}
/* 轮播项 */
.carousel-item {
min-width: 2
5%; /* 默认每屏显示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.7
5);
color: white;
padding: 1
5px;
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: 1
5px;
margin-top: 2
5px;
}
/* 简约按钮样式 */
.
control-btn {
background: #000;
color: #fff;
border: 2px solid #e0e0e0;
padding: 10px 2
5px;
border-radius: 8px;
cursor: pointer;
font-size: 0.9
5rem;
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: 3
50px;
}
}
@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 1
5px;
}
}
</style>
</head>
<body>
<!-- 轮播主容器 -->
<div class="carousel-container">
<!-- 轮播轨道 -->
<div class="carousel">
<!-- 轮播项1 -->
<div class="carousel-item">
<img src="https://www.fetchingpack.com/wp-content/uploads/202
5/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/202
5/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/202
5/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/202
5/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/202
5/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/202
5/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/202
5/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/202
5/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>
这个代码为什么修改了网页的字体样式，怎么修改可以让这个代码不影响网页的字体样式
本文提供了关键的安全控制措施，旨在帮助组织机构评估其信息安全状态并改进现有的防护策略。
扫一扫
1156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
