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

我還沒有測試這一點，但它應該是類似於你想達到什麼樣的東西。