htnl根据轮播图图片切换背景色

htnl根据轮播图图片切换背景色

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>轮播图示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
    <style>
        .swiper-container {
            width: 80%;
            height: 300px;
            overflow: hidden;
        }

        .swiper-slide {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
        }
    </style>
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image: url(./img/1.png);"></div>
            <div class="swiper-slide" style="background-image: url(./img/2.png);"></div>
            <div class="swiper-slide" style="background-image: url(./img/3.png);"></div>
        </div>
    </div>
    <script>

        // 获取轮播图容器
        const swiperContainer = document.querySelector('.swiper-container');

        // 初始化 Swiper 实例
        const swiper = new Swiper(swiperContainer, {
            autoplay: true,
            loop: true,
            on: {
                slideChangeTransitionEnd: function () {
                    // 获取当前轮播图的背景图片 URL
                    const currentSlide = this.slides[this.activeIndex];
                    const backgroundImage = currentSlide.style.backgroundImage;

                    // 创建一个 Image 对象
                    const img = new Image();
                    img.src = backgroundImage.slice(5, -2);

                    // 等待图片加载完成
                    img.onload = function () {
                        // 创建一个 Canvas 元素
                        const canvas = document.createElement('canvas');
                        canvas.width = img.width;
                        canvas.height = img.height;

                        // 在 Canvas 上绘制图片
                        const ctx = canvas.getContext('2d');
                        ctx.drawImage(img, 0, 0);

                        // 获取图片的像素数据
                        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                        const colors = {};
                        for (let i = 0; i < imageData.data.length; i += 4) {
                            const r = imageData.data[i];
                            const g = imageData.data[i + 1];
                            const b = imageData.data[i + 2];
                            const color = `${r},${g},${b}`;
                            if (colors[color]) {
                                colors[color]++;
                            } else {
                                colors[color] = 1;
                            }
                        }
                        const dominantColor = Object.keys(colors).reduce((a, b) => colors[a] > colors[b] ? a : b);

                        // 设置页面背景色
                        document.body.style.backgroundColor = `rgb(${dominantColor})`;
                    };
                }
            }
        });
    </script>
</body>

</html>

你可能感兴趣的:(前端,javascript,html)