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

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

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

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

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

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

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

我添加了一个侦听器，该侦听器仅在浏览器完成页面加载后执行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');
}
}

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

相关内容

最新更新

热门标签：