jQuery和引导转盘

Question

我正在尝试在jQuery中创建img并将旋转木马添加到幻灯片中，但在此代码中img没有显示

$(document).ready(function(e) {
  imgSlider = [1, 2, 4];
  imgTitle = ["apartement", "pool", "Beach"];
  $(".carousel").append("<div class='carousel-inner'></div>");
  for (i = 0; i < 3; i++) {
    imgSrc = "images/slider" + imgSlider[i] + ".jpg";
    imgT = imgTitle[i];
    $(".carousel-inner").append("<div class=item><img title=" + imgT + " src=" + imgSrc + " /></div>");

  }
  $('#mySlider').carousel({
    interval: 3000
  });
});

Answer 1

它没有显示，因为bootstrap轮播需要一个active项才能启动，您忘记将active类添加到第一个item，在for之后您可以看到：

​

$(document).ready(function(e) {
  let active;
  imgSlider = [1, 2, 4];
  imgTitle = ["apartement", "pool", "Beach"];
  $(".carousel").append("<div class='carousel-inner'></div>");
  for (i = 0; i < 3; i++) {
    if (i == 0) {
      active = 'active'
    }
    imgSrc = "images/slider" + imgSlider[i] + ".jpg";
    imgT = imgTitle[i];
    $(".carousel-inner").append("<div class='item " + active + "'><img title=" + imgT + " src=" + imgSrc + " /></div>");

  }
  $('#mySlider').carousel({
    interval: 3000
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

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

​