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

Question

我是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> 

页开始与在地方已经是默认的旋转木马和它应该被点击从列表中的图像时，成为完全是空的。

Answer 1

举一个想法，我想它会是这样的：

// 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")); 
}); 

我还没有测试这一点，但它应该是类似于你想达到什么样的东西。