Question

我正在使用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 AND CONTROL ARROW）

<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">

SCRIPT

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 
};

Answer 1

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

THUMBNAILS：

<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>

GALLERY OPENED

<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 
};

简单的Jquery照片库

1 个答案: