css实现动态幻灯版效果

原创

搜罗资料

发布于 2026-03-27 17:17:48

1570

下面给你一个纯 CSS + 少量 JS 实现的动态幻灯版（轮播图）效果，包含自动播放、指示器、左右切换按钮，代码简洁可直接复用。

🎬 效果预览

图片自动轮播，平滑过渡
底部指示器，点击可跳转到对应图片
左右箭头按钮，手动切换
响应式布局，适配不同屏幕

🧩 完整代码

html

预览


    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .slider-container {
            position: relative;
            width: 100%;
            max-width: 800px;
            height: 400px;
            margin: 20px auto;
            overflow: hidden;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .slider-wrapper {
            display: flex;
            height: 100%;
            transition: transform 0.6s ease-in-out;
        }
        .slider-item {
            min-width: 100%;
            height: 100%;
        }
        .slider-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        /* 左右切换按钮 */
        .slider-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background: rgba(0,0,0,0.4);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }
        .slider-btn:hover {
            background: rgba(0,0,0,0.7);
        }
        .slider-btn.prev {
            left: 15px;
        }
        .slider-btn.next {
            right: 15px;
        }
        /* 指示器 */
        .slider-indicators {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
        }
        .indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: all 0.3s;
        }
        .indicator.active {
            background: white;
            width: 24px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="slider-container">
        <div class="slider-wrapper">
            <div class="slider-item"></div>
            <div class="slider-item">/div>
        </div>
        <button class="slider-btn prev">&lt;</button>
        <button class="slider-btn next">&gt;</button>
        <div class="slider-indicators">
            <span class="indicator active" data-index="0"></span>
            <span class="indicator" data-index="1"></span>
            <span class="indicator" data-index="2"></span>
            <span class="indicator" data-index="3"></span>
        </div>
    </div>

    <script>
        const wrapper = document.querySelector('.slider-wrapper');
        const items = document.querySelectorAll('.slider-item');
        const indicators = document.querySelectorAll('.indicator');
        const prevBtn = document.querySelector('.prev');
        const nextBtn = document.querySelector('.next');
        let currentIndex = 0;
        const total = items.length;
        let interval;

        // 更新显示
        function updateSlider() {
            wrapper.style.transform = `translateX(-${currentIndex * 100}%)`;
            indicators.forEach((ind, i) => {
                ind.classList.toggle('active', i === currentIndex);
            });
        }

        // 下一张
        function nextSlide() {
            currentIndex = (currentIndex + 1) % total;
            updateSlider();
        }

        // 上一张
        function prevSlide() {
            currentIndex = (currentIndex - 1 + total) % total;
            updateSlider();
        }

        // 点击指示器
        indicators.forEach(ind => {
            ind.addEventListener('click', () => {
                currentIndex = parseInt(ind.dataset.index);
                updateSlider();
            });
        });

        // 自动播放
        function startAutoPlay() {
            interval = setInterval(nextSlide, 3000);
        }
        function stopAutoPlay() {
            clearInterval(interval);
        }

        // 绑定事件
        nextBtn.addEventListener('click', nextSlide);
        prevBtn.addEventListener('click', prevSlide);
        document.querySelector('.slider-container').addEventListener('mouseenter', stopAutoPlay);
        document.querySelector('.slider-container').addEventListener('mouseleave', startAutoPlay);

        // 初始化
        startAutoPlay();
    </script>
</body>
</html>

✨ 核心实现说明

布局结构
- .slider-container：外层容器，控制宽高和溢出隐藏
- .slider-wrapper：包裹所有幻灯片，通过 transform: translateX() 实现滑动
- .slider-item：单个幻灯片，宽度为容器 100%
CSS 动画
- transition: transform 0.6s ease-in-out：实现平滑滑动过渡
- 指示器 .active 状态：宽度变化 + 颜色变化，突出当前页
JS 逻辑
- 自动轮播：setInterval 定时切换
- 手动控制：左右按钮 + 指示器点击
- 交互优化：鼠标悬停暂停轮播，离开恢复

🎨 可自定义的部分

过渡效果：修改 transition 时长或缓动函数（如 ease-out）
自动播放速度：修改 setInterval 的毫秒数（当前 3000ms=3 秒）
样式美化：调整按钮大小、指示器样式、圆角、阴影等
效果扩展：可添加淡入淡出、缩放、3D 翻转等 CSS 动画

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css3

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css3

登录后参与评论

0 条评论

热度

css实现动态幻灯版效果

css实现动态幻灯版效果

🎬 效果预览

🧩 完整代码

✨ 核心实现说明

🎨 可自定义的部分

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐