HTML jQuery 轮播不改变图片

Question

我正在尝试用 servlet 中的一些图像制作轮播。我设法创建了旋转木马，但图像没有改变。始终是数组中的第一个图像。我确实从 din 文章中获得了代码：。但我不允许在文章中发表评论。 :(

<div class="container-fluid">
    <div id='myContent'></div>
</div>
<p>${offer.toString()}</p>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function() { 
     wrapper = $('#myContent'),
     carousel = $('<div/>', { id: "theCarousel3", "class": "carousel slide multi-item-carousel",
         append:'<div class="carousel-inner"></div><a class="left carousel-control" href="#theCarousel3" data-slide="prev"></a><a class="right carousel-control" href="#theCarousel3"data-slide="next"></a>' }), 
     carouselInner =carousel.find('.carousel-inner').eq(0); wrapper.append(carousel);
    carousel.carousel(); for (var i = 0; i <${houseImages.size()}; i++) {
    imgElement = $('<div />', { "class": "item" + (i ? '' : ' active'),
        append: $('<div/>', { "class": 'col-lg-4', append: $('<img/>', {
          src:'data:image/jpg;base64,${houseImages.get(i)}', id: 'img' + i,
          "class": 'img-responsive',
          height: 300
        })
      })
    })
    carouselInner.append(imgElement);
  }
})
</script>

更新：我使用owlcarousel。

Answer 1

您需要设置第一张幻灯片 class。

尝试改变这个：

"class": "item" + (i ? '' : ' active')

至

"class": "item" + (i == 0 ? ' active' : ''),

Answer 2

此外，您的代码段中未定义 ${houseImages.size()}，因此您的循环根本不是运行。

HTML jQuery 轮播不改变图片

HTML carousel with jQuery doesn't change image

html

javascript

css

jstl