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

【问题标题】：How to change the background-image of the full slider - bootstrap如何更改完整滑块的背景图像 - 引导
【发布时间】：2015-07-31 11:43:04
【问题描述】：

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

<!-- 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>

【问题讨论】：

你为什么要这么做？有什么具体原因还是只是想玩玩？

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

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

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

您可以创建一个数组或变量，用.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-property。

【讨论】：