<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(
-150%
- 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(
-250%
- 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(150% + 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: &#
39;&#
39;;
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: &#
39;&#
39;;
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/750" 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/10
35/1000/750" 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/750" 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/10
31/1000/750" 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/750" 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(&#
39;
.fp
-carousel
-container&#
39;);
const items = Array
.from(module
.querySelectorAll(&#
39;
.fp
-carousel
-item&#
39;));
const prevBtn = module
.querySelector(&#
39;
.fp
-prev
-btn&#
39;);
const nextBtn = module
.querySelector(&#
39;
.fp
-next
-btn&#
39;);
let currentIndex = 0;
// 初始化位置
updatePositions();
// 事件绑定函数
const bindEvents = function() {
// 图片点击事件
items
.forEach(item => {
item
.addEventListener(&#
39;click&#
39;, function(e) {
e
.stopPropagation();
if (this
.classList
.contains(&#
39;fp
-next&#
39;) || this
.classList
.contains(&#
39;fp
-next
-far&#
39;)) {
navigate(1);
}
else if (this
.classList
.contains(&#
39;fp
-prev&#
39;) || this
.classList
.contains(&#
39;fp
-prev
-far&#
39;)) {
navigate(
-1);
}
});
});
// 容器区域点击
container
.addEventListener(&#
39;click&#
39;, 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(&#
39;click&#
39;, function(e) {
e
.stopPropagation();
navigate(
-1);
});
nextBtn
.addEventListener(&#
39;click&#
39;, function(e) {
e
.stopPropagation();
navigate(1);
});
// 键盘导航
- 仅在当前
轮播激活时响应
document
.addEventListener(&#
39;keydown&#
39;, function(e) {
// 检查事件是否发生在当前
轮播模块内
if (document
.activeElement
.closest(&#
39;
.fp
-carousel
-module&#
39;) !== module) return;
if (e
.key === &#
39;ArrowLeft&#
39;) {
navigate(
-1);
} else if (e
.key === &#
39;ArrowRight&#
39;) {
navigate(1);
}
});
// 响应式调整
window
.addEventListener(&#
39;resize&#
39;, function() {
updatePositions();
});
};
// 导航函数
function navigate(direction) {
currentIndex = (currentIndex + direction + items
.length) % items
.length;
updatePositions();
}
// 更新位置
function updatePositions() {
items
.forEach((item, index) => {
item
.classList
.remove(&#
39;fp
-active&#
39;, &#
39;fp
-prev&#
39;, &#
39;fp
-next&#
39;, &#
39;fp
-prev
-far&#
39;, &#
39;fp
-next
-far&#
39;, &#
39;fp
-hidden&#
39;);
const position = (index
- currentIndex + items
.length) % items
.length;
if (position === 0) {
item
.classList
.add(&#
39;fp
-active&#
39;);
}
else if (position === 1) {
item
.classList
.add(&#
39;fp
-next&#
39;);
}
else if (position === 2) {
item
.classList
.add(&#
39;fp
-next
-far&#
39;);
}
else if (position === items
.length
- 1) {
item
.classList
.add(&#
39;fp
-prev&#
39;);
}
else if (position === items
.length
- 2) {
item
.classList
.add(&#
39;fp
-prev
-far&#
39;);
}
else {
item
.classList
.add(&#
39;fp
-hidden&#
39;);
}
});
}
// 初始化事件绑定
bindEvents();
};
// 初始化页面上的所有
轮播模块
document
.querySelectorAll(&#
39;
.fp
-carousel
-module&#
39;)
.forEach(initCarousel);
})();
</script>
这段代码表现出的容器右边上下两个圆角出现闪烁问题怎么修改？左边的箭头方向错了
作者即将从竞赛团队退役，但因队友需求及责任感决定参加最后两场比赛。面临比赛与英语四级考试冲突，最终选择先考试再参赛。同时，他还面临着经济压力和个人发展的挑战。
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
