javascript - 将轮播内容从图像更改为背景图像

Question

小伙子们 我正在研究这个带标签的轮播。现在它没有定义高度，并使用拉伸(stretch)到 100% 的图像来填充屏幕。我不喜欢它的工作方式。

相反，我想为每张幻灯片设置背景图片。这样，我可以为旋转木马设置定义的高度，并将背景设置为覆盖，以便很好地填充 div。

我在过去一两个小时内尝试了一些事情，但运气为零。

Check out the JSFiddle

这是我的 HTML

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

  <!-- Wrapper for slides -->
  <div class="carousel-inner">

    <div class="item active">
      <img src="http://placehold.it/1200x400/cccccc/ffffff">
       <div class="carousel-caption">
        <h3>Headline</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
      </div>
    </div><!-- End Item -->

     <div class="item">
      <img src="http://placehold.it/1200x400/999999/cccccc">
       <div class="carousel-caption">
        <h3>Headline</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
      </div>
    </div><!-- End Item -->

    <div class="item">
      <img src="http://placehold.it/1200x400/dddddd/333333">
       <div class="carousel-caption">
        <h3>Headline</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
      </div>
    </div><!-- End Item -->

    <div class="item">
      <img src="http://placehold.it/1200x400/999999/cccccc">
       <div class="carousel-caption">
        <h3>Headline</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div><!-- End Item -->

  </div><!-- End Carousel Inner -->

Java

$(document).ready( function() {
$('#myCarousel').carousel({
    interval: false
});
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
        clickEvent = true;
        $('.nav li').removeClass('active');
        $(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
    if(!clickEvent) {
        var count = $('#myCarousel .nav').children().length -1;
        var current = $('#myCarousel .nav li.active');
        current.removeClass('active').next().addClass('active');
        var id = parseInt(current.data('slide-to'));
        if(count == id) {
            $('#myCarousel .nav li').first().addClass('active');
        }
    }
    clickEvent = false;
});
});

还有一点CSS

#myCarousel .nav a small {
    display:block;
}
#myCarousel .nav {
    background:#eee;
}
#myCarousel .nav a {
    border-radius:0px;
}

#myCarousel img {
    width: 100%;
}

任何帮助将不胜感激..干杯!

Answer 1

我想通了，想通了

Here's a JSFIDDLE link

基本上您通过 html 添加背景，然后因为轮播不包含任何图像，您需要在 css 中设置高度等。

<div class="item" style="background: url(http://arti.us/clients/conversant/images/driving.jpg) no-repeat left center; background-size: cover;">