带有 Javascript 的缩略图库，没有插件答案

【问题标题】：Thumbnail image gallery with Javascript without plugin带有 Javascript 的缩略图库，没有插件
【发布时间】：2017-04-24 09:48:12
【问题描述】：

我正在寻找一个教程来创建一个带有缩略图和滑块选项的图片库，但是找到了很多例子 Jquery 和插件，只是滑块或者只是缩略图库。我找到了鼠标悬停的例子，但我需要点击，它是如何工作的？删除旧图像并插入新图像？我正在尝试构建具有最佳实践的代码，并且我只想在选择缩略图时加载图像。

这是我找到的唯一示例，但我不想选择页面中的所有图像，只选择缩略图。如何在代码中混合缩略图库和滑块？

缩略图

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

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

【问题讨论】：

在服务器上创建与它们在 HTML 中的确切大小相同的缩略图和完整图像，以避免矢量缩放过程。使用 click 事件将图像文件名存储在一个数组中，该数组根据您单击的方式递增。如果您想在循环结束时循环，只需递增回 0。欢迎使用 Stack Overflow。你的代码在哪里？
我知道不想要一个包含厨房水槽的插件，但是还有什么其他理由可以重新发明轮子？
Winterfruit，我不知道目的是什么，但我想看看我是如何使用 vanilla javascript 创建代码的。我没有通过考试。但我创建了一个 vailla 版本和一个 jquery 版本。

标签： javascript

【解决方案1】：

经过大量研究，我找到了解决方案，如果有人需要，我会问：

jQuery 版本

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

原版 javascript https://codepen.io/Gisesonia/pen/GyLGeL

【讨论】：

【解决方案2】：

您是否尝试过使用 Bootstrap 的轮播？ Link

此功能提供了您可以在其中放置缩略图的指示器。当然，您必须进行一些 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>

...

【讨论】：

是的，但要申请这份工作，我需要使用 vanilla Javascript，无需任何插件，包括 bootstrap。