Question

我的页面中有猫头鹰旋转木马幻灯片，其中包含四张图片，每张幻灯片都覆盖整个屏幕。幻灯片中的第一张图片大多是蓝色的，但剩下的图片大多是白色的。

我有两个徽标图片位于左上角的标题中。一个徽标图像为白色，第二个为黑色。我在下面的代码中只包含了白色徽标。

标题和猫头鹰轮播幻灯片的HTML代码。

public static void main(String[] args) {
    SpringApplicationBuilder applicationBuilder = new SpringApplicationBuilder(Application.class)
            .environment(new StandardEnvironment(){
                @Override
                public Map<String, Object> getSystemEnvironment() {
                    return new HashMap<>();
                }

                @Override
                public Map<String, Object> getSystemProperties() {
                    return new HashMap<>();
                }
            });
    applicationBuilder.run(args);
}

然后另外，Owl Carousel的脚本如下：

<div class="navbar-header">
    <h1 class="logo">
        <a class="" href="/main"><img src="images/white_logo.png"></a>
    </h1>
</div>

<section class="visual">
    <div class="owl-carousel">
        <div class="item visual1">
            <div class="textbox">
                <div class="text">
                    <span>Text for slide 1! Background picture is mostly blue.</span>
                </div>   
             </div>
        </div>
        <div class="item visual2">
            <div class="textbox">
                <div class="text">
                    <span>Text for slide 2! Background picture is mostly white.</span>
                </div>   
            </div>
        </div>
        <div class="item visual3">
            <div class="textbox">
                <div class="text">
                    <span>Text for slide 3! Background picture is mostly white.</span>
                </div>   
            </div>
        </div>
        <div class="item visual4">
            <div class="textbox">
                <div class="text">
                    <span>Text for slide 4! Background picture is mostly white.</span>
                </div>   
            </div>
        </div>
    </div>

最后，CSS是：

$('.visual .owl-carousel').owlCarousel({
    loop: true,
    margin: 0,
    nav: true,
    center: true,
    // autoplay:true,
    // autoplayTimeout:3000,
    // autoplayHoverPause:true,
    responsive: {
       0: {
           items: 1
          }
        },
        onInitialized: function() {
            repositionObj();
        },
        onResized: function() {
            repositionObj();
        }
    });

目前，使用此当前代码我有四张图片（一张蓝色图片和三张白色图片），但只有一张徽标图片（white_logo.png）显示幻灯片中的每张图片。白色徽标图像最初很合适，因为Owl Carousel的第一张照片覆盖整个屏幕是蓝色的。

然而，猫头鹰旋转木马中接下来的三个图像大多是白色的，因此白色徽标图像似乎消失了。对于这件事，我创建了另一个版本的这个标识，黑色。我们称之为（black_logo.png）

如何在标题中仅为Owl Carousel幻灯片中的白色图片显示黑色徽标，而白色徽标仅用于蓝色图片？

可以这么说：

white_logo.png＆amp; bluepicture.png
black_logo.png＆amp; whitepicture01.png
black_logo.png＆amp; whitepicture02.png
black_logo.png＆amp; whitepicture03.png

标题中的徽标随每个猫头鹰旋转木马幻灯片而变化

0 个答案: