Question

我正在使用完整的滑块引导程序，并希望保留所有功能，但我不知道是否可以只保留一个并且只更改背景图像。

<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for Slides -->
    <div class="carousel-inner">
        <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
            <div class="carousel-caption">
                <h2>Caption 1</h2>
            </div>
        </div>
        <div class="item">
            <!-- Set the second background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
            <div class="carousel-caption">
                <h2>Caption 2</h2>
            </div>
        </div>
        <div class="item">
            <!-- Set the third background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
            <div class="carousel-caption">
                <h2>Caption 3</h2>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>

</header>

Finnaly：

<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">

    <!-- Wrapper for Slides -->
    <div class="carousel-inner">
        <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" **style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"**></div>
            <div class="carousel-caption">
                <h2>Caption 1</h2>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>

</header>

Answer 1

我不知道为什么你会想要这个功能，但既然你在问，我会给你一个解决方案。

使用jQuery中的.css() - 选择器，您可以使用jQuery来定位CSS并进行更改。

您可以创建一个数组或变量，使用.each()循环它，将该信息存储在另一个变量中，然后让jQuery在一段时间后或操作后更改background-image。您可以使用以下jQuery更改背景：

$('.classname').css('background-image', 'variable');

就像一个例子（你必须弄清楚自己如何使用背景图像，如何让jQuery显示另一个等），我已经设置了this fiddle。在小提琴中，我有一个变量，我在|上拆分，然后我用.each()循环。此变量（chunk）稍后用于创建一些新的div，并将相应的chunk作为类名。

<强>的jQuery

var somestring = "img1|img2|img3",
    separated = somestring.split("|");

$.each(separated, function(index, chunk) {
    $('.test').append('<div class="' + chunk + '">' + chunk + '</div>');
    //This line is purely added to do something with the chunks
});

我不想制作你的整个代码，因为这个网站是为了互相帮助。我给了你一个很好的推动方向，你现在只需要弄清楚如何在点击或其他动作上更改background-image - 属性。

如何更改完整滑块的背景图像 - 引导程序

1 个答案: