离开图片后,如何重置html图片库以第一张图片开头?

托马斯·M

我有一个网站,在网站的不同部分上有多个图片库。当您单击特定画廊的图像时,它将更改为该画廊的下一个,依此类推。我想要实现的是,当您开始单击其他画廊时,将先前的画廊重置为图像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');"

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Javascript代码将最后一张图片移动到多张图片之间的第一张图片

在Jekyll中,我如何获取帖子的第一张图片?

从Woocommerce产品库中获取第一张图片的URL

获取每个产品的第一张图片

PHP图片库。Flexbox的CSS问题。柔性盒中只有第一张图像

如果上传了第二张图片,则第一张图片将被删除,第二张图片将取代此第一张图片,如何在本机中实现

PHP从多个来源加载第一张图片

使用新的DOMDocument()获取第一张图片

图片链接到另一张图片(图片库)

图片库将第一张图片放大

保存第一张图片后,Android连续拍摄图片(目的-ACTION_IMAGE_CAPTURE)

使用preg_replace_callback PHP在第一张图片后获取Add块

jQuery:在第一张图片/第一张图片的div之后插入div

显示第一张图片,不显示其他图片

如何仅从迭代中检索第一张图片?

Image_tag第一张图片

Wordpress - 在第一张图片后显示代码

ejs:仅将“活动”类添加到图片库的第一张图片

第一张图片显示弹出窗口,而不是其他图片

从提要内容中删除第一张图片

用户在删除第一张图片之前上传第二张图片

使用 jQuery 的自动可点击图片库,第一张图片淡入/淡出但其他图片不淡入?

Angular 删除第一张图片

在导航中成为第一张图片

如何隐藏第一张图片的左箭头和最后一张图片的右箭头

如何找到文件夹中的第一张图片?

我正在尝试从与 id 相关的表中获取第一张图片,但不幸的是获取所有图片而不是第一张图片

多张图片,无法从数组中获取第一张图片

延迟加载只加载第一张图片