我正在尝试创建一个投资组合网站，我想使用模态来显示项目。我正在使用W3.CSS框架。
我的问题是并非所有幻灯片都能正常工作，只是第一个。其他的没有正确显示，我只能看到导航箭头。我猜我需要为每个模态重置我的Javascript函数，但我已经尝试了不同的东西，我对Javascript的理解并没有用。
请帮忙！
这是我的HTML：
<div class="w3-col" style="width:20.93%;">
<img onclick="document.getElementById('dposters0001').style.display='block'" src="portfolio/design/posters/0001a.jpg" style="width:100%;" class="w3-hover-opacity"/>
<div id="dposters0001" class="w3-modal">
<div class="w3-modal-content w3-card-4 w3-animate-zoom">
<header class="w3-container w3-red">
<span onclick="document.getElementById('dposters0001').style.display='none'" class="w3-closebtn w3-padding-top">×</span>
<h2>Tourism</h2>
</header>
<div class="w3-row">
<div class="w3-container w3-third">
<h1>Brief</h1>
<p>Brief is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="w3-container w3-twothird w3-padding-16">
<div class="w3-content w3-display-container w3-center">
<img class="mySlides" src="portfolio/design/posters/0001a.jpg" style="max-height:80vh;width:auto;">
<img class="mySlides" src="portfolio/design/posters/0001b.jpg" style="max-height:80vh;width:auto;">
<img class="mySlides" src="portfolio/design/posters/0001c.jpg" style="max-height:80vh;width:auto;">
<div class="w3-center w3-section w3-large w3-text-red w3-display-bottomleft" style="width:100%">
<div class="w3-left w3-padding-left w3-hover-text-black" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-padding-right w3-hover-text-black" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-hover-white" onclick="currentDiv(3)"></span>
</div>
</div>
</div>
</div>
<div class="w3-container w3-light-grey w3-padding">
<button class="w3-btn w3-right w3-white w3-border" onclick="document.getElementById('dposters0001').style.display='none'">Close</button>
</div>
</div>
</div>
</div>
<div class="w3-col" style="width:20.93%;">
<img onclick="document.getElementById('dposters0002').style.display='block'" src="portfolio/design/posters/0002a.jpg" style="width:100%;" class="w3-hover-opacity"/>
<div id="dposters0002" class="w3-modal">
<div class="w3-modal-content w3-card-4 w3-animate-zoom">
<header class="w3-container w3-red">
<span onclick="document.getElementById('dposters0002').style.display='none'" class="w3-closebtn w3-padding-top">×</span>
<h2>Tourism</h2>
</header>
<div class="w3-row">
<div class="w3-container w3-third">
<h1>Brief</h1>
<p>Brief is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="w3-container w3-twothird w3-padding-16">
<div class="w3-content w3-display-container w3-center">
<img class="w3-card-4" src="portfolio/design/posters/0002a.jpg" style="max-height:80vh;width:auto;">
</div>
</div>
</div>
<div class="w3-container w3-light-grey w3-padding">
<button class="w3-btn w3-right w3-white w3-border" onclick="document.getElementById('dposters0002').style.display='none'">Close</button>
</div>
</div>
</div>
</div>
<div class="w3-col" style="width:20.93%;">
<img onclick="document.getElementById('dposters0003').style.display='block'" src="portfolio/design/books/0001a.jpg" style="width:100%;" class="w3-hover-opacity"/>
<div id="dposters0003" class="w3-modal">
<div class="w3-modal-content w3-card-4 w3-animate-zoom">
<header class="w3-container w3-red">
<span onclick="document.getElementById('dposters0003').style.display='none'" class="w3-closebtn w3-padding-top">×</span>
<h2>Tourism</h2>
</header>
<div class="w3-row">
<div class="w3-container w3-third">
<h1>Brief</h1>
<p>Brief is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="w3-container w3-twothird w3-padding-16">
<div class="w3-content w3-display-container w3-center">
<img class="mySlides" src="portfolio/design/books/0001a.jpg" style="max-height:80vh;width:auto;">
<img class="mySlides" src="portfolio/design/books/0001b.jpg" style="max-height:80vh;width:auto;">
<img class="mySlides" src="portfolio/design/books/0001c.jpg" style="max-height:80vh;width:auto;">
<div class="w3-center w3-section w3-large w3-text-white w3-display-bottomleft" style="width:100%">
<div class="w3-left w3-padding-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-padding-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-hover-white" onclick="currentDiv(3)"></span>
</div>
</div>
</div>
</div>
<div class="w3-container w3-light-grey w3-padding">
<button class="w3-btn w3-right w3-white w3-border" onclick="document.getElementById('dposters0003').style.display='none'">Close</button>
</div>
</div>
</div>
</div>
这是CSS：
.mySlides
{
display: none;
}
.w3-left, .w3-right, .w3-badge
{
cursor: pointer;
}
.w3-badge
{
height: 13px;
width: 13px;
padding: 0;
background-color: transparent;
}
这是Javascript：
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].classList.remove("w3-white");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].classList.add("w3-white");
}
答案 0 :(得分：0)
我今天遇到了完全相同的问题，最终解决了它。
您需要做的是在类和函数的末尾添加一个名称，以便javascript可以区分每个不同的幻灯片。
例如，在我的代码中，我为第一个幻灯片添加了“3rdfloor”，然后为下一个添加了“4thfloor”。我希望你能在下面的片段中看到这个
见下文：
<div id="3rd Floor" class="w3-container city" style="display:none">
<div class="container 75%">
<div class="w3-content w3-display-container"> <a class="w3-btn-floating w3-display-left" onclick="plusDivs3rdfloor(-1)">❮</a> <a class="w3-btn-floating w3-display-right" onclick="plusDivs3rdfloor(+1)">❯</a>
<div class="w3-display-container 3rdfloor"> <img src="images/32B/32BFloorplan.jpg" style="width:100%">
<div class="w3-display-bottommiddle w3-large w3-container w3-padding-16"> Floor Plan </div>
</div>
<div class="w3-display-container 3rdfloor"> <img src="images/32B/kitchen1.JPG" style="width:100%">
<div class="w3-display-bottommiddle w3-large w3-container w3-padding-16"> Kitchen </div>
</div>
</div>
<script>
var slideIndex3rdfloor = 1;
showDivs3rdfloor(slideIndex3rdfloor);
function plusDivs3rdfloor(n) {
showDivs3rdfloor(slideIndex3rdfloor += n);
}
function showDivs3rdfloor(n) {
var i;
var x = document.getElementsByClassName("3rdfloor");
if (n > x.length) {slideIndex3rdfloor = 1}
if (n < 1) {slideIndex3rdfloor = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex3rdfloor-1].style.display = "block";
}
</script>
</div>
</div>
<div id="4th Floor" class="w3-container city" style="display:none">
<div class="container 75%">
<div class="w3-content w3-display-container"> <a class="w3-btn-floating w3-display-left" onclick="plusDivs4thfloor(-1)">❮</a> <a class="w3-btn-floating w3-display-right" onclick="plusDivs4thfloor(+1)">❯</a>
<div class="w3-display-container 4thfloor"> <img src="images/32C/32CFloorplan.jpg" style="width:100%">
<div class="w3-display-bottommiddle w3-large w3-container w3-padding-16"> Floor Plan </div>
</div>
<div class="w3-display-container 4thfloor"> <img src="images/32C/Kitchen1.jpg" style="width:100%">
<div class="w3-display-bottommiddle w3-large w3-container w3-`padding-16"> Kitchen </div>
</div>
</div>
<script>
var slideIndex4thfloor = 1;
showDivs4thfloor(slideIndex4thfloor);
function plusDivs4thfloor(n) {
showDivs4thfloor(slideIndex4thfloor += n);
}
function showDivs4thfloor(n) {
var i;
var x = document.getElementsByClassName("4thfloor");
if (n > x.length) {slideIndex4thfloor = 1}
if (n < 1) {slideIndex4thfloor = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex4thfloor-1].style.display = "block";
}
</script>
</div>
</div>
所以基本上为你的网站替换任何我想要的“3rdfloor”或“4thfloor”，它应该有效。
希望这有帮助！
干杯，GC