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

【问题标题】：How to toggle between gallery-thumbnails and a specific slideshow-image on the same page?如何在同一页面上的画廊缩略图和特定幻灯片图像之间切换？
【发布时间】：2018-09-02 23:40:34
【问题描述】：

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

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

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

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

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

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

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

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

【问题讨论】：

标签： javascript css slideshow visibility image-gallery

【解决方案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');
    }
}

祝你好运完成你的画廊/滑块！

【讨论】：

非常感谢您以如此有帮助的回答热烈欢迎我，Thor！对您更正的代码稍作调整就可以帮助我做我想做的一切。由于放置 +=n 允许图像在幻灯片模式中来回滚动，而 =n 允许在画廊模式中单击的缩略图以正确的图像启动幻灯片模式，因此我为每个函数创建了两个函数，如下所示：函数 showDivFix (n) { allDivs(); altDivs(n); } 函数 plusDivs(n) { showDivs(slideIndex += n); } 功能 altDivs(n) { showDivs(slideIndex = n); } 。谢谢！
不客气！很高兴听到你修好了。考虑将答案标记为已接受。由于这是我的第一个答案，这将使我能够对帖子进行投票。我非常需要在这里感谢一些人:)