javascript - 离开后如何重置我的 html 图片库以从第一张图片开始?
问题描述
我有一个网站,在网站的不同部分有多个图片库。当您单击特定画廊的图像时,它会更改为该画廊的下一个,依此类推。我想要实现的是在您开始单击不同的画廊时将以前的画廊重置为图像 1。因此,当用户返回上一个画廊时,它将从第一张图像开始。
用于画廊的代码:
let projectIndexes = {
project1: 1,
project2: 1,
}
showDivs("project1", projectIndexes.project1);
showDivs("project2", projectIndexes.project2);
function plusDivs(project, n) {
showDivs(project, projectIndexes[project] += n);
}
function showDivs(project, index) {
let i;
let x = document.getElementById(project).getElementsByClassName("slidess");
if (index > x.length) { index = 1 }
if (index < 1) { index = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[index - 1].style.display = "block";
projectIndexes[project] = index;
let elements = document.getElementById(project).querySelector('.imgslide').children;
let imgNames = [];
for (let i = 0; i < elements.length; i++) {
imgNames.push(elements[i].children[0].children[0].alt);
}
}
<div class="slide">
<div class="slide-content">
<div class="nextt" onclick="plusDivs('project1', 1)"></div>
</div>
<div class="image-container container prjct">
<div class="projects" id="project1">
<div class="imgslide noselect">
<div class="content-container slidess">
<div class="style-3 style-3-left">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-middle">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-right">
<img class="imageName" alt="Img" src="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-content">
<div class="nextt" onclick="plusDivs('project2', 1)"></div>
</div>
<div class="image-container container prjct">
<div class="projects" id="project2">
<div class="imgslide noselect">
<div class="content-container slidess">
<div class="style-3 style-3-left">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-middle">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-right">
<img class="imageName" alt="Img" src="">
</div>
</div>
<!-- <div class="img-name"></div> -->
</div>
</div>
</div>
</div>
我知道一种强制显示第一个元素的方法,但事实证明它适用于所有项目。我找不到的是一种在单击新项目时识别的方法,即前一个和唯一的前一个项目需要重置为第一个图像。我已经为此苦苦挣扎了一段时间,无法使其发挥作用,因此我们将不胜感激任何帮助。如果有什么不清楚的地方,请告诉我,我会澄清的。
解决方案
如果我正确地跟随你,下面应该做到这一点。
function resetPriorGalleries(currentProject) {
var projectDivs = document.getElementsByClassName("projects");
for (let i = 0; i < projectDivs.length; i++) {
if (projectDivs[i].id === currentProject)
return;
showDivs(projectDivs[1].id, 1);
}
}
调用它的最佳位置可能是在 onclicks 中。
onclick="plusDivs('project2', 1); resetPriorGalleries('project2');"
推荐阅读
- ssh - 从 gpg 子密钥中导出不同的 ssh 密钥
- openlayers - 相对最大和最小缩放 - Openlayers
- javascript - 更改输入文本中的数字格式
- python - Python并发ThreadPoolExecutor - 如果满足条件则停止执行
- c - 如何逐行扫描带有字符串的文件并将它们存储到链表ADT中?
- c++ - 打包成员的引用地址不等于打包成员的地址?
- java - UnsatisfiedDependencyException:创建名称为“studentConrtroller”的 bean 时出错:通过字段“studentserv”表示不满足的依赖关系;
- scala - 胶水开发端点 - NoSuchMethodError:com.google.common.base.Stopwatch.createStarted()Lcom/google/common/base/Stopwatch
- sql - 导出 CSV 时,标题未填充到 SSRS 报告中
- git - git 在结帐时创建二进制文件