javascript - 单击时使图像显示在另一个图像下方

Question

我有一个简单的 slider 设置，其中包含大约 10 张图片。

我希望能够让用户单击 slider 中的其中一张图像，结果该图像出现在 slider 下方。

slider 仍保持在新放置的图像上方。

我不想要灯箱或模态窗口，我希望图像显示在 slider 下方的页面上。

我想知道如何在 JavaScript、CSS 或 Bootstrap 中做到这一点？

我无法在 Google 上找到与此相关的任何信息，因此非常感谢您提供的任何帮助。

---

Answer 1

由于这是一个相当模糊的问题，所以我有一个相当模糊的答案。这涉及到使用 jQuery，并且会在每次单击时将 slider 中的元素插入到 div 中。请随意澄清任何可以帮助我提供更好答案的细节。

$(document).ready(function() {

  $("#slider li").click(function() {
    var html = $(this).html();
    $("#page-beneath-slider").append(html);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
  <ul>
    <li><img src="http://placehold.it/100x100" /></li>
    <li><img src="http://placehold.it/100x100" /></li>
  </ul>
</div>
<h2>Stuff beneath the slider</h2>
<div id="page-beneath-slider"></div>