简单的 Jquery 照片库答案

【问题标题】：Simple Jquery photo gallery简单的 Jquery 照片库
【发布时间】：2016-04-25 10:45:52
【问题描述】：

我正在使用 html5 和 jquery 构建一个非常简单的照片库。画廊很好地使用 2 个箭头按钮连续滑动图片，但对我来说困难的是直接从其缩略图中找到一张照片。有人可以帮助我吗？

系统是这样工作的：

HTML (THUMBNAIL 1,2,3) 我需要链接这些以在画廊中设置可见的大版本

<img src="img/gallery/1.jpg" style="width:100%;" id="thumb1"/>
<img src="img/gallery/2.jpg" style="width:100%; id="thumb1"/>
<img src="img/gallery/3.jpg" style="width:100%;" id="thumb1"/>

HTML（IMGSLIDE 和控制箭头）

<img src="img/gallery/1.jpg" id="galleryimages">
<img onclick="slide(-1)" src="img/gallery/leftarrow.png" id="gallerybutton">
 <img onclick="slide(1)" src="img/gallery/leftarrow.png" id="gallerybutton">

脚本

var imagecount = 1;
var total = 9;

function slide(x) {
var image = document.getElementById('galleryimages');
imagecount = imagecount + x;
if (imagecount > total){ imagecount = 1; }
if (imagecount < 1){ imagecount = total; }
image.src = "img/gallery/" + imagecount + ".jpg";
imagecount = imagecount 
};

【问题讨论】：

想以这种方式解决了每次单击缩略图时将 imagecount 值重置为 1： SCRIPT $('#thisfoto).click(function(e){ imagecount = null; imagecount = 1 ; $('#galleryslide').fadeIn(1000) };跨度>
您的 HTML 有一个问题，您有多个具有相同 id 的元素。 ids 必须是唯一的。要识别事物的类型，您应该改用类。
看我的回答，效果很好，很简单。

标签： jquery html

【解决方案1】：

使用相同的图库脚本，我已经通过图库打开系统解决了此操作。我已经在任何缩略图中添加了一个链接，该链接设置了功能幻灯片的照片编号为 -1。所以这里有一个简单的照片库。现在，当我关闭照片以打开正确的点击照片时，我需要重置 imagecount var 的值。所以我添加了一个单击关闭按钮的脚本来重置 imagecount 变量

缩略图：

<a href="#" onclik="slide(0)" id="opg">
<img src="img/gallery/1.jpg" style="width:100%;" id="thumb1"/>
</a>
<a href="#" onclik="slide(1)" id="opg2">
<img src="img/gallery/2.jpg" style="width:100%;" id="thumb2"/>
</a>
<a href="#" onclik="slide(2)" id="opg3">
<img src="img/gallery/3.jpg" style="width:100%;" id="thumb3"/>
</a>

图库已打开

<img src="img/gallery/1.jpg" id="galleryimages"><!--gallery-->
<a href="#" onclick="slide(-1)"> Previous </a><!--previctures link-->
<a href="#" onclick="slide(-1)"> Next </a><!--nextctures link-->
<a href="#" id="closegallery">Close</a><!--closebutton-->

打开和关闭图库

$('#opg,#opg2,#opg3').click(function(e){     
$('#galleryimages').fadeIn(1000) });  //open gallery clicking tmbn


//close gallery clicking the close button and reset imagecount to 1
$('#closegallery').click(function(e){ 
imagecount = null; 
imagecount = 1 ;     
$('#galleryimages').fadeOut(1000) });

画廊系统

var imagecount = 1;
var total = 9;

function slide(x) {
var image = document.getElementById('galleryimages');
imagecount = imagecount + x;
if (imagecount > total){ imagecount = 1; }
if (imagecount < 1){ imagecount = total; }
image.src = "img/gallery/" + imagecount + ".jpg";
imagecount = imagecount 
};

【讨论】：