Question

我已使用bootstrap carousal并且只能使用一张图片的header background来更改color thief的颜色。

但是在carousal中有多个图像随时间变化。我无法从每个图像的轮播中获取图像ID，并使用颜色窃贼设置图像颜色更改。 < / p>

这是我试过的代码，请告诉我如何根据carousal图像的变化更改标题背景颜色。提前致谢

HTML

<section class="block">
    <div style="padding:42px">
        <div class="col-xs-12" style="border:15px solid rgb(250, 250, 250);padding: 0px;">
            <div id="myDiv">

                <div id="myCarousel" class="carousel slide" data-ride="carousel">

                    <!-- Wrapper for slides (228, 226, 224) -->

                    <div class="carousel-inner reduce-height" role="listbox">

                        <div class="item active">
                            <img id="myimg" src="images/titanic.jpg" alt="Chania">

                            <div class="absolute-div">
                                <div class="carousel-caption">
                                    <h3>Unforgettable Moments</h3>
                                </div>
                            </div>
                        </div>

                        <div class="item">
                            <img id="myimg2" src="images/beautiful-couple-widescreen.jpg" alt="Chania">
                            <div class="absolute-div">
                                <div class="carousel-caption">
                                    <h3>Cherishable Memories</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

这是我的彩色小偷和carousal的代码

<script>
    $(window).ready(function() {

        $('.carousel').carousel({
            interval: 3000
        });


        var sourceImage = document.getElementById("myimg");
        var colorThief = new ColorThief();
        var color = colorThief.getColor(sourceImage);
        document.getElementById("mydiv").style.backgroundColor = "rgb(" + color + ")";
    });
</script>

Answer 1

确定当前正在使用以下引导轮播事件的active $('#yourcarouselid').on('slide.bs.carousel', function (e) { $('#myCarousel').on('slide.bs.carousel', function (e) { var sourceImage=$(e.relatedTarget).find('img'); //get the active sliding image var colorThief=new ColorThief(); var color = colorThief.getColor(sourceImage); document.getElementById("mydiv").style.backgroundColor = "rgb(" + color+")"; }); });

var sourceImage=$(e.relatedTarget).find('img')[0]

<强>更新

只需更改上面的一行：

var A = board.create('point', [4.0, 2.0]);
var B = board.create('point', [1.0, 1.0]);
board.create('arrow', [A, B]);

使用颜色窃贼从引导旋转木马的图像更改标题背景颜色

1 个答案: