不帶插件的Javascript縮略圖庫

Question

我一直在尋找一個使用縮略圖和滑塊選項創建圖像庫的教程，但是找到許多示例Jquery和插件，而只是滑塊或縮略圖庫。 我找到了帶有鼠標懸停的示例，但我需要單擊鼠標，它如何工作頂部移除舊圖像並插入新圖像？ 我正在嘗試建立具有最佳實用性的代碼，並且僅在選擇縮略圖時才想加載圖像。

這是我找到的唯一示例，但我不想從頁面中選擇所有圖像，僅選擇縮略圖。 如何在代碼中將縮略圖庫與滑塊混合在一起？

縮略圖

http://www.web-development-institute.com/how-create-simple-image-gallery-javascript

滑塊http://www.w3schools.com/w3css/w3css_slideshow.asp

Answer 1

您嘗試過Bootstrap的輪播嗎？ 鏈接

此功能指示了您可以在其中放置縮略圖的指示器。當然，您將必須進行一些CSS覆蓋才能使其按需顯示。

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active">
      <!-- put your thumbnail here-->
    </li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

...

Answer 2

經過大量研究，我找到了解決方案，我在詢問是否有人需要：

jQuery版本

<https://codepen.io/Gisesonia/pen/vpPvaW>

香草javascript https://codepen.io/Gisesonia/pen/GyLGeL