Thumbnail image gallery with Javascript without plugin

我正在寻找一个教程，创建一个图片库与缩略图和滑块选项，但找到许多例子jquery和插件，只是滑块或只是缩略图库。我发现鼠标悬停的例子，但我需要点击，它是如何工作顶部删除旧的图像，并插入新的图像？我正在尝试使用最佳实践来构建代码，并且我只想在选择缩略图时才加载图像。Thumbnail image gallery with Javascript without plugin

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

缩略图

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

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

来源

2016-12-09 gise

在t上创建缩略图和完整图像他服务器将使用HTML格式的大小，以避免使用Vector Scaling。将图像文件名存储在数组中，您可以使用单击事件根据您单击哪种方式进行增加。如果你想在循环结束时循环，只需递增到0.欢迎使用堆栈溢出。 ***你的***代码在哪里？ – PHPglue

我的理解是不想要一个包含厨房水槽的插件，但还有什么其他的理由来重新发明车轮？ – winterfruit

Winterfruit，我不知道是什么意图，但我认为这是看我是如何创建代码与香草的JavaScript。我没有通过测试。但是我创建了一个vailla版本和一个jQuery版本。 – gise

你与引导旋转木马试试？ 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>

...

来源

2016-12-09 01:45:52

是的，但要申请我需要做的工作与香草JavaScript没有任何插件，包括引导。 – gise

我发现了大量的研究后一个解决方案，我aswering如果有人需要：

jQuery的版本

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

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

来源

2018-03-04 18:41:04 gise

Thumbnail image gallery with Javascript without plugin

回答

相关问题