<style>
/* 使用唯一前缀避免样式冲突 */
.fp
-carousel
-module {
position
: relative;
width
: 1
00%;
max
-width
: 8
0%;
height
: 5
00px;
overflow
: hidden;
margin
: 2
0px auto;
perspective
: 12
00px;
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
: 1
00%;
height
: 1
00%;
isolation
: isolate; /* 创建新的层叠上下文 */
}
.fp
-carousel
-module .fp
-carousel
-item {
position
: absolute;
top
: 5
0%;
left
: 5
0%;
width
: 6
0%;
height
: 8
0%;
transform: translate(-5
0%,
-5
0%
);
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
: 1
00%;
height
: 1
00%;
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
: 2
0px 15px 15px;
transform: translateY
(1
00%
);
transition
: transform 0.5s ease
-out;
text
-align
: center;
font
-size
: 16px;
font
-weight
: 5
00;
pointer
-events
: none;
}
/* 当前激活项样式 */
.fp
-carousel
-module .fp
-carousel
-item.fp
-active {
transform: translate(-5
0%,
-5
0%
) scale
(1.15
);
z
-index
: 1
00;
box
-shadow
: 0 25px 5
0px 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
(-15
0%
- 3
0px
),
-5
0%
) scale
(0.85
);
z
-index
: 2
0;
opacity
: 0.85;
filter
: blur
(1px
);
}
.fp
-carousel
-module .fp
-carousel
-item.fp
-next {
transform: translate(calc
(5
0% + 3
0px
),
-5
0%
) scale
(0.85
);
z
-index
: 2
0;
opacity
: 0.85;
filter
: blur
(1px
);
}
.fp
-carousel
-module .fp
-carousel
-item.fp
-prev
-far {
transform: translate(calc
(-25
0%
- 6
0px
),
-5
0%
) scale
(0.7
);
z
-index
: 15;
opacity
: 0.7;
filter
: blur
(2px
);
}
.fp
-carousel
-module .fp
-carousel
-item.fp
-next
-far {
transform: translate(calc
(15
0% + 6
0px
),
-5
0%
) 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
(-5
0% + 3
00px
),
-5
0%
) 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
: 1
00%;
width
: 15%;
z
-index
: 2
00;
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
: 1
00%;
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
(9
0deg, rgba
(0,0,0,
0.4
), transparent
);
}
.fp
-carousel
-module .fp
-nav
-btn.fp
-prev
-btn .fp
-arrow {
transform: rotate
(18
0deg
);
margin
-left
: -2
0px;
}
.fp
-carousel
-module .fp
-nav
-btn.fp
-next
-btn {
right
: 0;
}
.fp
-carousel
-module .fp
-nav
-btn.fp
-next
-btn
::before {
background
: linear
-gradient
(27
0deg, rgba
(0,0,0,
0.4
), transparent
);
}
.fp
-carousel
-module .fp
-arrow {
display
: block;
width
: 4
0px;
height
: 4
0px;
border
-radius
: 5
0%;
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 1
0px 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
: 4
00px;
}
.fp
-carousel
-module .fp
-carousel
-item {
width
: 7
0%;
height
: 85%;
}
.fp
-carousel
-module .fp
-nav
-btn {
width
: 2
0%;
}
}
@media
(max
-width
: 48
0px
) {
.fp
-carousel
-module {
height
: 3
00px;
}
.fp
-carousel
-module .fp
-carousel
-item {
width
: 85%;
height
: 9
0%;
}
.fp
-carousel
-module .fp
-description {
font
-size
: 14px;
padding
: 15px 1
0px 1
0px;
}
}
</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/1
015/1
000/75
0" 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/1
035/1
000/75
0" 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/1
04
0/1
000/75
0" 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/1
031/1
000/75
0" 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/1
018/1
000/75
0" 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>
这段代码表现出的容器右边上下两个圆角出现闪烁问题怎么修改？左边的箭头方向错了
通过应用translate3d(0,0,0)等CSS3属性触发硬件加速，显著提升了Chrome浏览器中动画的流畅度，改进前后性能对比明显。
扫一扫
149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
