如何在同一页面上的画廊缩略图和特定幻灯片图像之间切换？

Question

这是我的第一个问题，但我确实阅读了指南。我希望您能以直接的回答欢迎我加入社区。

我正在开发一个画廊网站，其中 JQuery 不是依赖项。我试图在所有图片的缩略图视图和仅显示一张照片的幻灯片视图之间切换，即我单击其缩略图的那一张图片。另外，我希望缩略图视图和幻灯片视图是分开的，一个不显示另一个显示，但我希望它们都在同一页面上，也就是说，不要有两个单独的页面，每个页面一个其中，我不想使用弹出窗口进行切换。此外，我想在单击幻灯片视图图片时切换回缩略图视图，并且在单击图片周围的上一张和下一张 sides/buttons 时在上一张和下一张图片之间切换。在 Milo 中实现了我想要的一个例子：

https://madebyminimal.com/demo/milo/

我昨天的大部分时间都在尝试 Javascript 中的许多功能，玩弄不透明度、可见性和显示 CSS 功能，但无论我做什么，我的缩略图的特定图片单击不显示，似乎 Javascript 通过修改幻灯片 visible/opaque/displayed 范围内的任何内容来响应我在缩略图 visible/opaque/displayed 范围内单击任何内容。

下面是我的代码，包括我尝试过的一些函数变体，它们被标记在实验 Javascript 部分下。该部分之前的所有代码都运行良好。不过，我不明白为什么 "experimental" 代码不起作用。它是否与其他功能冲突，或者是否被它们覆盖？如果是这样，我应该如何修改它才能让它做我想做的一切？

HTML:

   <span class="wrapper-focuser" id="slideshow">
        <span class="scrolling-wrapper">
            <span class="prev-card" onclick="plusDivs(-1)">
            </span>
            <span class="next-card" onclick="plusDivs(+1)">
            </span>
            <span class="all-cards" onclick="allDivs()">
            </span>
            <div id="images">
                <div class="card slide one">
                      <img class="picture" onclick="allDivs()" src="img/Picture1.jpg" alt="">
                </div>
                <div class="card slide two" onclick="allDivs()">
                      <img class="picture" src="img/Picture2.jpg" alt="">
                </div>
                <div class="card slide three">
                      <img class="picture" onclick="allDivs()" src="img/Picture3.jpg" alt="">
                </div>
            </div>
        </span>
    </span>
    <span class="thumbnails is-visible" id="gallery">
        <span class="scrolling-wrapper">
          <div id="small">
            <img class="thumbnail" onclick="allDivs(); plusDivs(+0); divDisp(1);" src="img/Picture1.jpg" alt="">
            <img class="thumbnail" onclick="allDivs(); plusDivs(+1); divDisp(2);" src="img/Picture2.jpg" alt="">
            <img class="thumbnail" onclick="allDivs(); plusDivs(+2); divDisp(3);" src="img/Picture3.jpg" alt="">
          </div>
        </span>
    </span>

CSS:

.wrapper-focuser {
    position: absolute;
    height: 600px;
    width: 1000px;
    display: inline-block;
    opacity: 0;
}


.scrolling-wrapper {
  height: 600px;
  width: 1000px;
  float: left;
  display: inline-block; 
  position: relative;
  overflow: hidden;
  text-align: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 20px;
}

.no-cursor {
    cursor: none;
}

.card { 
  height: auto; 
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.card:hover {
    cursor: url("/img/all.png"), auto;
}

.prev-card {
    width: 400px;
    float: left;
    height: auto;
    display: block;
    min-height: 600px;
    min-width: 400px;
}

.prev-card:hover {
    cursor: url("/img/prev.png"), auto;
}

.next-card {
    width: 400px;
    display: inline;
    float: right;
    height: auto;
    display: block;
    min-height: 600px;
    min-width: 400px;
}

.next-card:hover {
    cursor: url("/img/next.png"), auto;
    opacity: 0.4;
}

.all-cards {
    width: 200px;
    position: relative;
    height: auto;
    display: inline-block;
    min-height: 600px;
    min-width: 200px;
}

.all-cards:hover {
    cursor: url("/img/all.png"), auto;
}

.thumbnails {
    position: absolute;
    height: 600px;
    width: 1000px;
    display: inline-block;
    visibility: hidden;
}

.thumbnail {
    padding: 10px; 
    width: auto;
    margin: 10px;
    height: 200px;
}

.thumbnail:hover {
    opacity: 0.4;
    cursor: pointer;
}

.picture {
    position: relative;
}

.is-discernable {
        opacity: 1;
    }

.is-visible {
        visibility: visible;
    }

Javascript:

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("slide");
    var y = document.getElementsByClassName("picture");
    if (n > x.length) {slideIndex = 1}
    if (n < 1) {slideIndex = x.length}
    for (i = 0; i < x.length; i++) {
        x[i].style.opacity = "0";
        y[i].style.opacity = "0";
    }
    x[slideIndex-1].style.opacity = "1";
    y[slideIndex-1].style.opacity = "1"; 
}


function allDivs() {
    var x = document.getElementById("slideshow");
    var y = document.getElementById("gallery");
    var z = document.getElementsByClassName("scrolling-wrapper");
    if (window.getComputedStyle(x).display === "none") {
        x.classList.toggle('is-discernable');
        y.classList.toggle('is-visible');
        z.classList.toggle('no-cursor');
    } else {
        x.classList.toggle('is-discernable');
        y.classList.toggle('is-visible');
        z.classList.toggle('no-cursor');
    }
}

实验性Javascript：

var pictureIndex = 1;
transpireDivs(pictureIndex);

function divDisp(n) {
    transpireDivs(pictureIndex += n);
}

function transpireDivs(n) {
    var x = n;
    var k = document.getElementsByClassName("one");
    var l = document.getElementsByClassName("two");
    var m = document.getElementsByClassName("three");
    if (x == 1) {
        k.classList.toggle('is-discernable');
    } else if (x == 2) {
        l.classList.toggle('is-discernable');
    } else if (x == 3) {
        m.classList.toggle('is-discernable');
    }    
}

我尝试了许多其他功能，其中 none 有效。这就像包装器和画廊 div 之间的连接以某种方式短路了，或者就像任何新功能都被我已经编写的功能覆盖了一样。我想了解为什么会这样，以及一些替代解决方案，例如为通过点击事件链接的两个 div 创建两个页面，或者以不同的方式构建幻灯片。

感谢大家对这段比较长的代码的关注，希望我的问题能对遇到类似问题的其他人有所帮助！

Answer 1

通过解决代码在浏览器控制台中给出的错误，我似乎已经解决了您的问题。

我添加了一个仅在浏览器加载完页面后才执行 showDivs(slideIndex) 的侦听器。否则 x 和 y 将在第一次调用时为空，这使得 x[slideIndex-1] 将不存在。
z.classList.toggle('no-cursor'); 给出了一个错误，因为 z 是一个元素列表，而不是一个元素。

您需要循环元素：for (let i = 0; i < z.length; i++) {z[i].classList.toggle('no-cursor');}
这没有给出错误，但将 showDivs(slideIndex += n); 更改为 showDivs(slideIndex = n) 可确保显示正确的幻灯片。

这是替换的图库：

 <span class="thumbnails is-visible" id="gallery">
        <span class="scrolling-wrapper">
          <div id="small">
            <img class="thumbnail" onclick="showDivFix(1);" src="img/Picture1.jpg" alt="">
            <img class="thumbnail" onclick="showDivFix(2);" src="img/Picture2.jpg" alt="">
            <img class="thumbnail" onclick="showDivFix(3);" src="img/Picture3.jpg" alt="">
          </div>
        </span>
    </span>

代码：

var slideIndex = 1;

document.addEventListener("DOMContentLoaded", function(event) { 
    showDivs(slideIndex);
});

function showDivFix(n) {
    allDivs();
    plusDivs(n);
    //divDisp(n);
}

function plusDivs(n) {
    showDivs(slideIndex = n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("slide");
    var y = document.getElementsByClassName("picture");
    if (n > x.length) {slideIndex = 1}
    if (n < 1) {slideIndex = x.length}
    for (i = 0; i < x.length; i++) {
        x[i].style.opacity = "0";
        y[i].style.opacity = "0";
    }
    x[slideIndex-1].style.opacity = "1";
    y[slideIndex-1].style.opacity = "1"; 
}


function allDivs() {
    var x = document.getElementById("slideshow");
    var y = document.getElementById("gallery");
    var z = document.getElementsByClassName("scrolling-wrapper");
    x.classList.toggle('is-discernable');
    y.classList.toggle('is-visible');
    for (let i = 0; i < z.length; i++) {
        z[i].classList.toggle('no-cursor');
    }
}

祝你顺利完成 gallery/slider！

如何在同一页面上的画廊缩略图和特定幻灯片图像之间切换？

How to toggle between gallery-thumbnails and a specific slideshow-image on the same page?

javascript

css

visibility

image-gallery

slideshow