模式上的后退和前进按钮位于图像库上(可滚动浏览）
Back and forward buttons on a modal over an image gallery (to scroll through)?
我有一个图像库，根据w3schools.com的教程，它使用CSS和Javascript在库上以模式打开图像。我最初在指向外部图像时遇到了问题，但这里有人向我展示了如何解决这个问题。现在，我想制作向前和向后按钮，这样用户就可以在画廊中移动，而无需每次都关闭模态。我已经设法让箭头按钮以我想要的方式出现在模块中（以及大小、移动和显示）。不幸的是，我一直无法获得按钮来更改在中间的图像和文本。我能做的最好的事情就是让它停止破坏模态，至少在点击时保持相同的图像和文本。这是我迄今为止的代码。
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<div class="backButton" id="bckBtn"><img src="../gallery_images/buttonPlaceHolder.png" alt="Back" style="width:100%; float:left">
</div>
<img class="modal-content" id="img01">
<div id="caption"></div>
<div class="forwardButton" id="fwdBtn"><img src="../gallery_images/buttonPlaceHolder.png" alt="Forward" style="width:100%; float:right;">
</div>
</div>
<script>
var modal = document.getElementById('myModal');
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
var backButton = document.getElementById('bckBtn');
var forwardButton = document.getElementById('fwdBtn');
var images = document.getElementsByTagName('img');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var i;
for (i = 0; i < images.length; i++) {
images[i].onclick = function(){
modal.style.display = "block";
var src = this.src;
var filename = src.substring(src.lastIndexOf('/')+1);
var filepath = src.substring(0, src.lastIndexOf('/')+1);
modalImg.src = filepath + 'large-' + filename;
modalImg.alt = this.alt;
captionText.innerHTML = this.nextElementSibling.innerHTML;
backButton.onclick = function() {
var filename = src.substring(src.lastIndexOf('/')+1);
var filepath = src.substring(0, src.lastIndexOf('/')+1);
modalImg.src = filepath + 'large-' + filename;
modalImg.alt = this.alt;
captionText.innerHTML = nextElementSibling.innerHTML;
}
forwardButton.onclick = function() {
var filename = src.substring(src.lastIndexOf('/')+1);
var filepath = src.substring(0, src.lastIndexOf('/')+1);
modalImg.src = filepath + 'large-' + filename;
modalImg.alt = this.alt;
captionText.innerHTML = nextElementSibling.innerHTML;
}
}
}
modalImg.onclick = function() {
modal.style.display = "none";
}
</script>
创建我想要的东西似乎是一个漫长而复杂的方法，但是，我是Javascript的新手（今天刚开始）。任何想法都将不胜感激。
您的问题看起来更像是"这里有人很酷，想为我编写代码吗？"不是吗
好吧，我认为这是一个有趣的练习来完成，因为Turnip已经在你之前的问题上贡献了很多。我认为，在使用Javascript的第一天不鼓励别人会很难过
但是嘿！我不确定你将来会有这么多机会
；）
现在，基本上，这段代码所做的是为所有缩略图分配一个onclick函数，以在模态中显示相应的较大图像。它还可以在第一次单击缩略图时"打开"您的模态
这就是Turnip扮演的角色
请注意，这些缩略图现在必须具有"GalleryImg"类
我在Turnip的版本中添加了这个，以确保循环中不包括前后按钮，因为它们也是图像
对于您的后退和前进按钮，我添加了一个隐藏的输入，我将其用作内存插槽，用于保存模态中显示的实际图像
请注意，所有缩略图都必须有一个"基于零"的id：第一个缩略图id是img-0。
从这些信息开始，您的后退和前进按钮可以根据您单击的按钮来扣除您希望显示的图像的id号
哦。。。我还预料到了你的下一个问题，当到达最后一个图像时，肯定会从第一个图像重新开始，反之亦然
试着找出哪些行在起作用！；）
这是代码：
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<div class="backButton" id="bckBtn"><img src="../gallery_images/buttonPlaceHolder.png" alt="Back" style="width:100%; float:left"></div>
<img class="modal-content" id="img01">
<div id="caption"></div>
<div class="forwardButton" id="fwdBtn"><img src="../gallery_images/buttonPlaceHolder.png" alt="Forward" style="width:100%; float:right;"></div>
<input type="hidden" id="mem">
</div>
<img class="GalleryImg" id="img-0" src="../path/to/image1" alt="alternate text 1"><div>caption text 1</div>
<img class="GalleryImg" id="img-1" src="../path/to/image2" alt="alternate text 2"><div>caption text 2</div>
<img class="GalleryImg" id="img-2" src="../path/to/image3" alt="alternate text 3"><div>caption text 3</div>
<img class="GalleryImg" id="img-3" src="../path/to/image4" alt="alternate text 4"><div>caption text 4</div>
<!-- and so on... -->
<script>
var modal = document.getElementById('myModal');
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
var backButton = document.getElementById('bckBtn');
var forwardButton = document.getElementById('fwdBtn');
var images = document.getElementsByClassName('GalleryImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var i;
for (i = 0; i < images.length; i++) {
images[i].onclick = function(){
modal.style.display = "block";
var src = this.src;
var filename = src.substring(src.lastIndexOf('/')+1);
var filepath = src.substring(0, src.lastIndexOf('/')+1);
modalImg.src = filepath + 'large-' + filename;
modalImg.alt = this.alt;
captionText.innerHTML = this.nextElementSibling.innerHTML;
document.getElementById("mem").value=this.id;
}
}
backButton.onclick = function(){
ImageId = document.getElementById("mem").value.split("-");
PreviousImage = parseInt(ImageId[1])-1;
if(PreviousImage<0){PreviousImage=images.length-1;}
images[PreviousImage].click();
}
forwardButton.onclick = function(){
ImageId = document.getElementById("mem").value.split("-");
NextImage = parseInt(ImageId[1])+1;
if(NextImage>=images.length-1){NextImage=0;}
images[NextImage].click();
}
</script>
编辑（2016-05-03）
如以下评论中所述，要"反转"ID编号，请如下所示：
<!-- Future images to be added here-->
<img class="GalleryImg" id="img-3" src="../path/to/image4" alt="alternate text 4"><div>caption text 4</div>
<img class="GalleryImg" id="img-2" src="../path/to/image3" alt="alternate text 3"><div>caption text 3</div>
<img class="GalleryImg" id="img-1" src="../path/to/image2" alt="alternate text 2"><div>caption text 2</div>
<img class="GalleryImg" id="img-0" src="../path/to/image1" alt="alternate text 1"><div>caption text 1</div>
必须创建图像元素的反向阵列。。。由于id编号链接到元素阵列中目标图像的位置
然后，您可以反转到后退和前进按钮的逻辑
使用此代码：
// Create a "reversed" images array
var imagesReversed = [];
var i = images.length;
while(i--){
imagesReversed.push(images[i]);
}
// Adds 1 from the actual id to get the target image position in the reversed array.
backButton.onclick = function(){
ImageId = document.getElementById("mem").value.split("-");
PreviousImage = parseInt(ImageId[1])+1;
if(PreviousImage>images.length-1){PreviousImage=0;}
imagesReversed[PreviousImage].click();
}
// Substracts 1 from the actual id to get the target image position in the reversed array.
forwardButton.onclick = function(){
ImageId = document.getElementById("mem").value.split("-");
NextImage = parseInt(ImageId[1])-1;
if(NextImage<0){NextImage=images.length-1;}
imagesReversed[NextImage].click();
}
相关文章：
- 循环浏览多个身体背景图像
- 模式上的后退和前进按钮位于图像库上(可滚动浏览）
- 利用移动设备上的滑动功能浏览图像阵列
- Javascript循环浏览图像
- 基于缩略图在路径中循环浏览图像
- 循环浏览 base64 图像并保存为 pdf
- 如何自动循环浏览图像数组
- 如何使用上一个/下一个按钮循环浏览图像
- 如何让不同的图像和文本自动循环浏览?我的图像正在循环，但我的文本不是
- 如何禁止复制浏览我的网站的图像
- 使用 javascript 循环浏览多个图像
- 如何设置图像数组并单独循环浏览它们
- 如何在同一页面中浏览和显示图像
- 在 javascript 中循环浏览图像数组
- 循环浏览 javascript 以进行图像预览
- 在jquery/Javascript中浏览图像时，如何从本地磁盘获取本地url图像路径
- 循环浏览web字体文件中的图像
- 如何循环浏览每个图像并在casperjs脚本中检查其是否存在错误
- 使用按钮循环浏览存储在阵列中的图像
- 循环浏览图像中的像素
