如何更改完整滑塊的背景圖像 - bootstrap

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>

最后：

<!-- 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()選擇器，您可以定位 CSS 並使用 jQuery 更改它。

您可以創建一個數組或變量，使用.each()循環遍歷它，將該信息存儲在另一個變量中，然后讓 jQuery 在一段時間或某個操作后更改background-image 。 您可以使用以下 jQuery 更改背景：

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

舉個例子（你必須自己弄清楚如何處理背景圖像，如何讓 jQuery 顯示另一個等等），我已經設置了這個 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屬性。