文章/答案/技术大牛

发布

社区首页 >问答首页 >如何重置我的html图片库，使其从离开后的第一个图像开始？

问如何重置我的html图片库，使其从离开后的第一个图像开始？
EN

Stack Overflow用户

提问于 2019-10-11 03:12:19

回答 1查看 38关注 0票数 0

我有一个网站上的不同部分的多个图片库。当您单击特定图库的图像时，它会变成该图库的下一个图库，依此类推。我正在尝试实现的是，当您开始单击不同的图库时，将以前的图库重置为图像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>

我知道一种强制显示第一个元素的方法，但事实证明它对所有项目都是这样做的。我找不到的是一种方法，当点击一个新项目时，识别前一个项目需要重置为第一个图像。我已经在这个问题上挣扎了一段时间，无法让它工作，所以任何帮助都将不胜感激。如果有什么不清楚的地方，让我知道，我会澄清的。

html

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-11 03:54:05

如果我没弄错的话，下面的代码就可以了。

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');"

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58329666

复制

相似问题

问如何重置我的html图片库，使其从离开后的第一个图像开始？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何重置我的html图片库，使其从离开后的第一个图像开始？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何重置我的html图片库，使其从离开后的第一个图像开始？
EN