寻求实现带交替位置且点击居中置顶的Web设计滑块方案

设计师要求在首页添加如下样式的滑块区域：

需要满足以下要求：

• 点击滑块时，该滑块居中显示并置于其他滑块上方
• 滑块呈交替排列（参考示例图）

以下是优化后的实现代码，解决了原代码中排列逻辑的问题，完美匹配需求：

关键改动说明 #

1. 交替排列逻辑：重新计算非激活滑块的位置，将激活滑块左侧的滑块按"右-左"交替偏移，右侧的按"左-右"交替偏移，实现错落的交替排列效果
2. 居中与层级控制：激活滑块设置最高z-index，并通过translateX(-50%)确保完全居中，配合scale(1.2)突出显示
3. 过渡动画优化：保持平滑的transform过渡，确保切换过程自然流畅
4. 动态位置计算：根据滑块总数和当前索引动态计算偏移量，适配不同数量的滑块

JavaScript 代码 #

document.addEventListener("DOMContentLoaded", function() {
    const slides = document.querySelectorAll('.slide');
    
    slides.forEach((slide, index) => {
        slide.addEventListener('click', () => {
            slides.forEach(s => s.classList.remove('active'));
            slide.classList.add('active');
            updateSlides();
        });
    });
    
    function updateSlides() {
        const activeIndex = Array.from(slides).findIndex(s => s.classList.contains('active'));
        const slideCount = slides.length;
        
        slides.forEach((slide, index) => {
            // 重置基础样式
            slide.style.zIndex = 1;
            slide.style.transform = '';
            
            if (slide.classList.contains('active')) {
                // 激活滑块：居中、放大、最高层级
                slide.style.zIndex = slideCount + 1;
                slide.style.transform = 'translateX(-50%) scale(1.2)';
            } else {
                const offsetMultiplier = 40; // 偏移量基数，可调整
                const isLeftOfActive = index < activeIndex;
                const distanceFromActive = isLeftOfActive ? activeIndex - index : index - activeIndex;
                
                // 交替偏移逻辑：奇数距离向右/上，偶数距离向左/下
                let translateX = 0;
                if (isLeftOfActive) {
                    translateX = distanceFromActive % 2 === 1 
                        ? -(distanceFromActive * offsetMultiplier) 
                        : -(distanceFromActive * offsetMultiplier) + 15;
                } else {
                    translateX = distanceFromActive % 2 === 1 
                        ? distanceFromActive * offsetMultiplier 
                        : distanceFromActive * offsetMultiplier - 15;
                }
                
                slide.style.zIndex = slideCount - distanceFromActive;
                slide.style.transform = `translateX(${translateX}%) scale(${1 - (distanceFromActive * 0.1)})`;
            }
        });
    }

    updateSlides();
});

CSS 代码 #

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.slider {
    position: relative;
    width: 80%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide {
    position: absolute;
    left: 50%; /* 初始定位在容器中线，方便translateX居中 */
    width: 20%;
    height: 100%;
    background-color: #333;
    color: #fff;
    border-radius: 25px;
    transition: transform 0.5s ease, z-index 0.5s ease;
    cursor: pointer;
    border: 2px solid #fff;
    box-sizing: border-box;
}

.content {
    text-align: center;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

h2 {
    margin-top: 0;
    font-size: 1.2rem;
}

p {
    font-size: 0.9rem;
    line-height: 1.4;
}

HTML 代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交替滑块示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="slider">
        <div class="slide active">
            <div class="content">
                <h2>标题 1</h2>
                <p>这是第一个滑块的内容，点击可将其居中放大显示。</p>
            </div>
        </div>
        <div class="slide">
            <div class="content">
                <h2>标题 2</h2>
                <p>这是第二个滑块的内容，点击后会切换到居中位置。</p>
            </div>
        </div>
        <div class="slide">
            <div class="content">
                <h2>标题 3</h2>
                <p>这是第三个滑块的内容，支持交替排列效果。</p>
            </div>
        </div>
        <div class="slide">
            <div class="content">
                <h2>标题 4</h2>
                <p>这是第四个滑块的内容，点击后层级会自动调整。</p>
            </div>
        </div>
        <div class="slide">
            <div class="content">
                <h2>标题 5</h2>
                <p>这是第五个滑块的内容，完美匹配设计师要求的样式。</p>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Rami Sedhom