<style>
/* 使用唯一前缀避免样式冲突 */
.fp
-carousel
-module {
position
: relative;
width
: 100
%;
max
-width
: 80
%;
height
: 500px;
overflow
: hidden;
margin
: 20px auto;
perspective
: 1200px;
box
-sizing
: border
-box;
border
-radius
: 8px;
box
-shadow
: 0 5px 15px rgba
(0,0,0,0.1
);
}
.fp
-carousel
-module .fp
-carousel
-container {
position
: relative;
width
: 100
%;
height
: 100
%;
isolation
: isolate; /* 创建新的层叠上下文 */
}
.fp
-carousel
-module .fp
-carousel
-item {
position
: absolute;
top
: 50%;
left
: 50%;
width
: 60
%;
height
: 80
%;
transform: translate(-50%,
-50%);
border
-radius
: 12px;
box
-shadow
: 0 15px 35px rgba
(0,0,0,0.25
);
transition
: transform 0.7s cubic
-bezier
(0.25, 0.1, 0.25, 1
),
filter 0.7s ease,
opacity 0.7s ease;
z
-index
: 1;
overflow
: hidden;
background
: #fff;
will
-change
: transform;
cursor
: pointer;
}
.fp
-carousel
-module .fp
-carousel
-item img {
width
: 100
%;
height
: 100
%;
object
-fit
: cover;
transition
: transform 0.4s ease;
}
.fp
-carousel
-module .fp
-description {
position
: absolute;
bottom
: 0;
left
: 0;
right
: 0;
background
: linear
-gradient
(transparent, rgba
(0,0,0,0.8
));
color
: white;
padding
: 20px 15px 15px;
transform: translateY
(100
%);
transition
: transform 0.5s ease
-out;
text
-align
: center;
font
-size
: 16px;
font
-weight
: 500;
pointer
-events
: none;
}
/* 当前激活项样式 */
.fp
-carousel
-module .fp
-carousel
-item.fp
-active {
transform: translate(-50%,
-50%) scale
(1.15
);
z
-index
: 100;
box
-shadow
: 0 25px
50px rgba
(0,0,0,0.3
);
cursor
: default;
}
.fp
-carousel
-module .fp
-carousel
-item.fp
-active .fp
-description {
transform: translateY
(0
);
}
/* 堆叠项样式 */
.fp
-carousel
-module .fp
-carousel
-item.fp
-prev {
transform: translate(calc
(-1
50% - 30px
),
-50%) scale
(0.85
);
z
-index
: 20;
opacity
: 0.85;
filter
: blur
(1px
);
}
.fp
-carousel
-module .fp
-carousel
-item.fp
-next {
transform: translate(calc
(50% + 30px
),
-50%) scale
(0.85
);
z
-index
: 20;
opacity
: 0.85;
filter
: blur
(1px
);
}
.fp
-carousel
-module .fp
-carousel
-item.fp
-prev
-far {
transform: translate(calc
(-2
50% - 60px
),
-50%) scale
(0.7
);
z
-index
: 15;
opacity
: 0.7;
filter
: blur
(2px
);
}
.fp
-carousel
-module .fp
-carousel
-item.fp
-next
-far {
transform: translate(calc
(1
50% + 60px
),
-50%) scale
(0.7
);
z
-index
: 15;
opacity
: 0.7;
filter
: blur
(2px
);
}
.fp
-carousel
-module .fp
-carousel
-item.fp
-hidden {
opacity
: 0;
z
-index
: 0;
transform: translate(calc
(-50% + 300px
),
-50%) scale
(0.5
);
}
/* 悬停效果 */
.fp
-carousel
-module .fp
-carousel
-item.fp
-prev
::after,
.fp
-carousel
-module .fp
-carousel
-item.fp
-next
::after,
.fp
-carousel
-module .fp
-carousel
-item.fp
-prev
-far
::after,
.fp
-carousel
-module .fp
-carousel
-item.fp
-next
-far
::after {
content
: '';
position
: absolute;
top
: 0;
left
: 0;
right
: 0;
bottom
: 0;
background
: rgba
(255,255,255,0.1
);
transition
: background 0.3s ease;
}
.fp
-carousel
-module .fp
-carousel
-item.fp
-prev
:hover
::after,
.fp
-carousel
-module .fp
-carousel
-item.fp
-next
:hover
::after,
.fp
-carousel
-module .fp
-carousel
-item.fp
-prev
-far
:hover
::after,
.fp
-carousel
-module .fp
-carousel
-item.fp
-next
-far
:hover
::after {
background
: rgba
(255,255,255,0.3
);
}
/* 导航按钮 */
.fp
-carousel
-module .fp
-nav
-btn {
position
: absolute;
top
: 0;
height
: 100
%;
width
: 15
%;
z
-index
: 200;
display
: flex;
align
-items
: center;
justify
-content
: center;
cursor
: pointer;
opacity
: 0.5;
transition
: opacity 0.3s ease;
}
.fp
-carousel
-module .fp
-nav
-btn
::before {
content
: '';
position
: absolute;
top
: 0;
bottom
: 0;
width
: 100
%;
z
-index
: -1;
}
.fp
-carousel
-module .fp
-nav
-btn
:hover {
opacity
: 1;
}
.fp
-carousel
-module .fp
-nav
-btn.fp
-prev
-btn {
left
: 0;
}
.fp
-carousel
-module .fp
-nav
-btn.fp
-prev
-btn
::before {
background
: linear
-gradient
(90deg, rgba
(0,0,0,0.4
), transparent
);
}
.fp
-carousel
-module .fp
-nav
-btn.fp
-prev
-btn .fp
-arrow {
transform: rotate
(180deg
);
margin
-left
: -20px;
}
.fp
-carousel
-module .fp
-nav
-btn.fp
-next
-btn {
right
: 0;
}
.fp
-carousel
-module .fp
-nav
-btn.fp
-next
-btn
::before {
background
: linear
-gradient
(270deg, rgba
(0,0,0,0.4
), transparent
);
}
.fp
-carousel
-module .fp
-arrow {
display
: block;
width
: 40px;
height
: 40px;
border
-radius
: 50%;
background
: rgba
(255,255,255,0.8
);
display
: flex;
align
-items
: center;
justify
-content
: center;
font
-size
: 24px;
font
-weight
: bold;
color
: #333;
box
-shadow
: 0 2px 10px rgba
(0,0,0,0.2
);
pointer
-events
: auto;
transition
: transform 0.2s ease, background 0.2s ease;
}
.fp
-carousel
-module .fp
-arrow
:hover {
background
: rgba
(255,255,255,1
);
transform: scale
(1.1
);
}
/* 响应式设计 */
@media
(max
-width
: 768px
) {
.fp
-carousel
-module {
height
: 400px;
}
.fp
-carousel
-module .fp
-carousel
-item {
width
: 70
%;
height
: 85
%;
}
.fp
-carousel
-module .fp
-nav
-btn {
width
: 20
%;
}
}
@media
(max
-width
: 480px
) {
.fp
-carousel
-module {
height
: 300px;
}
.fp
-carousel
-module .fp
-carousel
-item {
width
: 85
%;
height
: 90
%;
}
.fp
-carousel
-module .fp
-description {
font
-size
: 14px;
padding
: 15px 10px 10px;
}
}
</style>
<div class="fp
-carousel
-module">
<div class="fp
-carousel
-container">
<div class="fp
-carousel
-item fp
-active" data
-index="0">
<img src="https
://picsum.photos/id/1015/1000/7
50" alt="Mountain View">
<div class="fp
-description">Majestic mountain range at sunrise</div>
</div>
<div class="fp
-carousel
-item fp
-next" data
-index="1">
<img src="https
://picsum.photos/id/1035/1000/7
50" alt="Ocean Waves">
<div class="fp
-description">Turquoise ocean waves crashing on rocks</div>
</div>
<div class="fp
-carousel
-item fp
-next
-far" data
-index="2">
<img src="https
://picsum.photos/id/1040/1000/7
50" alt="Forest Path">
<div class="fp
-description">Mystical forest path covered in moss</div>
</div>
<div class="fp
-carousel
-item fp
-prev" data
-index="3">
<img src="https
://picsum.photos/id/1031/1000/7
50" alt="Desert Dunes">
<div class="fp
-description">Golden desert dunes at sunset</div>
</div>
<div class="fp
-carousel
-item fp
-prev
-far" data
-index="4">
<img src="https
://picsum.photos/id/1018/1000/7
50" alt="City Skyline">
<div class="fp
-description">Urban city skyline at twilight</div>
</div>
<div class="fp
-nav
-btn fp
-prev
-btn">
<div class="fp
-arrow">❮</div>
</div>
<div class="fp
-nav
-btn fp
-next
-btn">
<div class="fp
-arrow">❯</div>
</div>
</div>
</div>
<script>
(function
() {
// 封装整个轮播逻辑避免全局污染
const initCarousel = function
(module
) {
const container = module.querySelector
('.fp
-carousel
-container'
);
const items = Array.from
(module.querySelectorAll
('.fp
-carousel
-item'
));
const prevBtn = module.querySelector
('.fp
-prev
-btn'
);
const nextBtn = module.querySelector
('.fp
-next
-btn'
);
let currentIndex = 0;
// 初始化位置
updatePositions
();
// 事件绑定函数
const bindEvents = function
() {
// 图片点击事件
items.forEach
(item => {
item.addEventListener
('click', function
(e
) {
e.stopPropagation
();
if
(this.classList.contains
('fp
-next'
) || this.classList.contains
('fp
-next
-far'
)) {
navigate
(1
);
}
else if
(this.classList.contains
('fp
-prev'
) || this.classList.contains
('fp
-prev
-far'
)) {
navigate
(-1
);
}
}
);
}
);
// 容器区域点击
container.addEventListener
('click', function
(e
) {
const rect = container.getBoundingClientRect
();
const clickX = e.clientX
- rect.left;
if
(clickX > rect.width * 3/4
) {
navigate
(1
);
}
else if
(clickX < rect.width * 1/4
) {
navigate
(-1
);
}
}
);
// 导航按钮
prevBtn.addEventListener
('click', function
(e
) {
e.stopPropagation
();
navigate
(-1
);
}
);
nextBtn.addEventListener
('click', function
(e
) {
e.stopPropagation
();
navigate
(1
);
}
);
// 键盘导航
- 仅在当前轮播激活时响应
document.addEventListener
('keydown', function
(e
) {
// 检查事件是否发生在当前轮播模块内
if
(document.activeElement.closest
('.fp
-carousel
-module'
) !== module
) return;
if
(e.key === 'ArrowLeft'
) {
navigate
(-1
);
} else if
(e.key === 'ArrowRight'
) {
navigate
(1
);
}
}
);
// 响应式调整
window.addEventListener
('resize', function
() {
updatePositions
();
}
);
};
// 导航函数
function navigate
(direction
) {
currentIndex =
(currentIndex + direction + items.length
) % items.length;
updatePositions
();
}
// 更新位置
function updatePositions
() {
items.forEach
((item, index
) => {
item.classList.remove
('fp
-active', 'fp
-prev', 'fp
-next', 'fp
-prev
-far', 'fp
-next
-far', 'fp
-hidden'
);
const position =
(index
- currentIndex + items.length
) % items.length;
if
(position === 0
) {
item.classList.add
('fp
-active'
);
}
else if
(position === 1
) {
item.classList.add
('fp
-next'
);
}
else if
(position === 2
) {
item.classList.add
('fp
-next
-far'
);
}
else if
(position === items.length
- 1
) {
item.classList.add
('fp
-prev'
);
}
else if
(position === items.length
- 2
) {
item.classList.add
('fp
-prev
-far'
);
}
else {
item.classList.add
('fp
-hidden'
);
}
}
);
}
// 初始化事件绑定
bindEvents
();
};
// 初始化页面上的所有轮播模块
document.querySelectorAll
('.fp
-carousel
-module'
).forEach
(initCarousel
);
}
)();
</script>
这段代码表现出的容器右边上下两个圆角出现闪烁问题怎么修改？左边的箭头方向错了
本文介绍了一种使用Flex布局而非Transform来确保文本在Div中既水平又垂直居中的方法，以此避免字体边缘模糊的问题。
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
