JQuery 和 Bootstrap:如何将图像列表中的图像添加到轮播

JQuery and Bootstrap: How to add image from a list of images to a carousel?

本文关键字：图像 添加 列表 JQuery Bootstrap      更新时间：2023-09-26

我是 JQuery 的新手，我正在制作一个自己的轮播，其中有一系列图片，您想在单击时将图片添加到轮播中。

页面左侧有图片可供选择，轮播位于右侧。图像列表的代码如下所示。

<div class="pics">
  <div class="col-sm-4 iu">
    <img src="img/iu.png" alt="IU" class="img-thumbnail" style="width:150px; height:150px;">
  </div>
  <div class="col-sm-4 hyuna">
    <img src="img/hyuna.png" alt="hyuna" class="img-thumbnail" style="width:150px; height:150px;">
  </div>

轮播幻灯片的代码是这样的 

<div class="carousel-inner" role="listbox">
  <div class="item active">
    <img src="img/minah.png" alt="minah" />
  <div class="carousel-caption">
    <h1>This is Minah.</h1>
  </div>
</div>
<div class="item">
  <img src="img/juwoo.png" alt="juwoo" />
  <div class="carousel-caption">
     <h1>This is Juwoo.</h1>
  </div>

该页面开始时已有默认轮播，当单击列表中的图像时，它应该会完全变为空。

为了给出一个想法，我认为它会是这样的：

// As the document loads, keep a variable to define that you have not clicked a image.
var image_clicked = false;
$(document).on("click",".img-thumbnail",function(e){
  // Once you click a image on the side.
  var $this = $(e.target)
  // Check the variable
  if(!image_clicked){
    // If not clicked, clear the carousel
    $(".carousel-inner").html("");
    // mark it as clicked, so that the second time you click a image, it wont come to this block.
    image_clicked = true;
  }
    // It will append the new image to the carousel.
    // On the second time you click a image, you will only be appending elements to the carousel.
    // Add item div to the carousel.
    $(".carousel-inner").append("<div class='item'><div class='carousel-caption'><h1></h1></div></div>");
    // Get the added items
    var item = $(".carousel-inner").find(".item");
    // Get the current item and prepend a image to it.
    $(item[item.length-1]).prepend($this);
    // Remove the previous active class that was assigned
    $(".carousel-inner item").each(function(i,it){
      if($(it).hasClass("active")){
        $(it).removeClass("active");
      }
    });
    // Add a active class to the current added item
    $(item[item.length-1]).addClass("active");
    // If you images on the side have a value attribute to them
    // then keep it as caption
    $(item[item.length-1]).find(".carousel-caption h1").html($this.attr("value"));
});

我还没有测试过这个，但它应该类似于你想要实现的目标。

相关文章：