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的旋转木马？ 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>

...

Answer 2

经过大量研究后我找到了一个解决方案，如果有人需要，我就会感到很沮丧：

Jquery版本

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

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

带有Javascript但没有插件的缩略图图库

2 个答案: