我不明白如何将正面图像（模态图像）设置为幻灯片显示，而不是背面的图像，因为当我点击箭头移动图像时，您可以看到它在后面的幻灯片显示中移动图像在前面。
我认为问题在于“类”“myslides”，当我调用第二个幻灯片脚本时，它使用与第一个相同的类myslides，但我不知道如何解决这个问题。
我还添加了我的代码片段我无法使用更短的代码，所以请原谅我：
/* Universal reset: */
*{
margin: 0;
padding: 0;
}
/* Article Picture Style */
figure{
border:1px solid #142830;
float:right;
height:300px;
margin-left:15px;
overflow:hidden;
width:500px;
}
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 101; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
/*Dot For Slide*/
.mySlides {display:none }
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0 }
.w3-btn,.w3-button{border:none;display:inline-block;outline:0;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%; cursor:pointer; height:15px;width:15px;padding:0}
.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
:left;border:none;outline:none;white-space:normal;float:none}
.w3-responsive{display:block;overflow-x:auto}
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-
.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
.w3-left-align{text-align:left}.w3-right-align{text-align:right}.w3-justify{text-align:justify}.w3-center{text-align:center}
/* #ccc transparent color */
.w3-border-top{border-top:1px solid #ccc}.w3-border-bottom{border-bottom:1px solid #ccc}
.w3-border-left{border-left:1px solid #ccc}.w3-border-right{border-right:1px solid #ccc}
.w3-topbar{border-top:6px solid #ccc}.w3-bottombar{border-bottom:6px solid #ccc}
.w3-leftbar{border-left:6px solid #ccc}.w3-rightbar{border-right:6px solid #ccc}
.w3-section,.w3-code{margin-top:50px;margin-bottom:50px}
.w3-button:hover{color:#000;background-color:#ffffffe0}
.w3-transparent,.w3-hover-none:hover{color:#fff; background-color:transparent}
.w3-hover-none:hover{box-shadow:none}
.w3-border-0{border:0!}.w3-border{border:1px solid #fff}
.w3-white,.w3-hover-white:hover{color:#000;background-color:#ffffffe0}<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Refresh Website Every 5 Second -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Script Links -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<figure> <!-- The figure tag marks data (usually an image) that is part of the article -->
<!-- Image to Slide -->
<div class="w3-content w3-display-container">
<img class="mySlides myImg" src="https://girdzijauskas.files.wordpress.com/2017/12/fonas.jpg?w=640" alt="text, text" width="620" height="340">
<img class="mySlides myImg" src="http://img.freepik.com/free-psd/abstract-background-design_1297-87.jpg?size%5Cx3d338%5Cx26ext%5Cx3djpg" alt="Pasta, Special" width="620" height="340">
<img class="mySlides myImg" src="http://xinrenfuyin.org/wp-content/uploads/2017/11/0295.jpg" alt="Pasta, Appetizing" width="620" height="340">
<!-- Make Buttons -->
<div class="w3-large w3-text-white ">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button>
</div>
<!--Make Dots -->
<div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
<!-- Make Buttons -->
<div class="w3-large w3-text-white ">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs2(-1)">❮</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs2(1)">❯</button>
</div>
<!--Make Dots -->
<div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
<span class="w3-badge demo2 w3-border w3-transparent w3-hover-white" onclick="currentDiv2(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv2(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv2(3)"></span>
</div>
<!-- Slider Image Script -->
<script>
var slideIndex2 = 1;
showDivs2(slideIndex2);
function plusDivs2(n) {
showDivs2(slideIndex2 += n);
}
function currentDiv2(n) {
showDivs2(slideIndex2 = n);
}
function showDivs2(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots2 = document.getElementsByClassName("demo2");
if (n > x.length) {slideIndex2 = 1}
if (n < 1) {slideIndex2 = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots2.length; i++) {
dots2[i].className = dots2[i].className.replace(" w3-white", "");
}
x[slideIndex2-1].style.display = "block";
dots2[slideIndex2-1].className += " w3-white";
}
</script>
</div>
<!-- Modal Image Script -->
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = $('.myImg');
var modalImg = $("#img01");
var captionText = document.getElementById("caption");
$('.myImg').click(function(){
modal.style.display = "block";
var newSrc = this.src;
modalImg.attr('src', newSrc);
captionText.innerHTML = this.alt;
});
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
<!-- Slider Image Script -->
<script>
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].className = dots[i].className.replace(" w3-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-white";
}
</script>
</div>
</figure>
</body>
</html>
答案 0 :(得分：0)
尝试按ID附加每个元素。 id应该在每个元素上都是唯一的，其中类可以广泛用于许多元素。 这里发生的是，在第一次出现时，代码被执行。但结果并不是理想的结果，因为DOM上的第一个出现是“背景”滑块。