html+css+js实现无缝轮播特效

原创

鱼樱前端 2025-02-24 12:08:36 ©著作权

文章标签 CSS JavaScript 前端 ide 上传图片 文章分类 Python 后端开发

©著作权归作者所有：来自51CTO博客作者鱼樱前端的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 HTML 和 CSS3 实现的炫酷轮播特效的完整示例。这个轮播特效使用 CSS3 的动画和过渡效果，能够实现平滑的切换效果。您只需将以下代码复制并粘贴到一个新的 HTML 文件中（例如 index.html），然后用浏览器打开即可查看效果。

<!DOCTYPE html>

<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无缝轮播特效</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        .carousel {
            width: 80%;
            max-width: 600px;
            overflow: hidden;
            position: relative;
            border: 2px solid #ccc;
            border-radius: 10px;
        }

        .slides {
            display: flex;
            transition: transform 0.5s ease-in-out;
            width: 100%;
        }

        .slide {
            min-width: 100%;
            box-sizing: border-box;
        }

        .slide img {
            width: 100%;
            border-radius: 10px;
        }

        .indicators {
            text-align: center;
            margin-top: 10px;
        }

        .indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 0 5px;
            background-color: #ccc;
            border-radius: 50%;
            cursor: pointer;
        }

        .indicator.active {
            background-color: #333;
        }

        /* 自动轮播效果 */
        @keyframes slide {
            0% { transform: translateX(0); }
            20% { transform: translateX(0); }
            25% { transform: translateX(-100%); }
            45% { transform: translateX(-100%); }
            50% { transform: translateX(-200%); }
            70% { transform: translateX(-200%); }
            75% { transform: translateX(-100%); }
            100% { transform: translateX(0); }
        }

        /* 动画关键帧 */
        @keyframes slideAnimation {
            0%, 25% { transform: translateX(0); }
            30%, 55% { transform: translateX(-100%); }
            60%, 85% { transform: translateX(-200%); }
        }

    </style>



    <div class="carousel">
        <div class="slides">
            <div class="slide">
                <img src="转存失败，建议直接上传图片文件 https://picsum.photos/200/100?random=1" alt="Slide 1转存失败，建议直接上传图片文件">
            </div>
            <div class="slide">
                <img src="转存失败，建议直接上传图片文件 https://picsum.photos/200/100?random=2" alt="Slide 2转存失败，建议直接上传图片文件">
            </div>
            <div class="slide">
                <img src="转存失败，建议直接上传图片文件 https://picsum.photos/200/100?random=3" alt="Slide 3转存失败，建议直接上传图片文件">
            </div>
        </div>
        <div class="indicators">
            <div class="indicator active" data-index="0"></div>
            <div class="indicator" data-index="1"></div>
            <div class="indicator" data-index="2"></div>
        </div>
    </div>

    <script>
        const slides = document.querySelector('.slides');
        const indicators = document.querySelectorAll('.indicator');
        let currentIndex = 0;

        function updateCarousel() {
            const offset = -currentIndex * 100;
            slides.style.transform = `translateX(${offset}%)`;
            indicators.forEach((indicator, index) => {
                indicator.classList.toggle('active', index === currentIndex);
            });
        }

        indicators.forEach(indicator => {
            indicator.addEventListener('click', (e) => {
                currentIndex = parseInt(e.target.dataset.index);
                updateCarousel();
            });
        });

        // 自动轮播
        setInterval(() => {
            currentIndex = (currentIndex + 1) % indicators.length;
            updateCarousel();
        }, 3000);  // 每3秒切换
    </script>

</body>
</html>