我在一个HTML页面上设置了2个幻灯片。但是他们彼此冲突。
更改一个幻灯片会更改另一个幻灯片。 另外，两个幻灯片都显示空白幻灯片。
这与使用相同全局索引数组的两个幻灯片有关。
有人可以修复我的代码吗？
https://codepen.io/kspranav10/pen/jONLJQO
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v2</title>
<script src="https://use.fontawesome.com/ac0201ddad.js"></script>
<script src="https://kit.fontawesome.com/b854d36a57.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="slideshow1">
<div class="slideshow-container">
<div class="mySlides fade">
<img src="https://cdn.pixabay.com/photo/2019/08/06/08/21/golden-4387704_960_720.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://cdn.pixabay.com/photo/2013/02/21/19/06/beach-84533_960_720.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://cdn.pixabay.com/photo/2014/08/15/11/29/sea-418742__180.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://pixabay.com/photos/cloth-fabric-red-orange-yellow-3672088/" style="width:100%">
</div>
</div>
<div class="color_layer"></div>
<div class="wrapper">
<h1 class="text1">LOREM IPSUM</h1>
<h1 class="text2">LET US SHOW YOU THE WAY</h1>
</div>
<div class="slideshow_dots">
<span><i class="fa fa-circle dot" onclick="currentSlide(1)" aria-hidden="true"></i></span>
<span><i class="fa fa-circle dot" onclick="currentSlide(2)" aria-hidden="true"></i></span>
<span><i class="fa fa-circle dot" onclick="currentSlide(3)" aria-hidden="true"></i></span>
<span><i class="fa fa-circle dot" onclick="currentSlide(4)" aria-hidden="true"></i></span>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="slideshow2">
<div class="slideshow-container">
<div class="mySlides fade slide-1">
<div class="img"> </div>
<div class="subdiv">
<div class="wrapper">
<p id="quote">“The biggest thing for me was finding an accredited University. The academic level of education I experienced, online at **** University, was excellent.”</p><br>
<p id="quoter">SAIMA SHARI ISMAIL<br>
- MASTERS IN EDUCATION</p>
</div>
</div>
</div>
<div class="mySlides fade slide-2">
<div class="img"> </div>
<div class="subdiv">
<div class="wrapper">
<p id="quote">“The most beneficial part of the program was the ability to network with students across the Middle east. The program also offered the opportunity to work on time management and project management.”</p><br>
<p id="quoter">**************<br>
- Bachelor of Science in Administration</p>
</div>
</div>
</div>
<div class="mySlides fade slide-3">
<div class="img"> </div>
<div class="subdiv">
<div class="wrapper">
<p id="quote">“The pursuit of my PHD has been a personal goal since I graduated from University of *** in 2018 . Now that I have begun my journey to Canada Immigration.”</p><br>
<p id="quoter">ARUNA DILSHAN JAYARATHNE<br>
- PhD</p>
</div>
</div>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a>
</div>
<script src="app.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.slideshow1 {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 75vh;
width: 100%;
position: relative;
}
.slideshow1 .color_layer {
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slideshow1 .wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 800px;
text-align: center;
}
.slideshow1 .text1 {
font-weight: bold;
color: white;
}
.slideshow1 .text2 {
font-weight: 200;
color: white;
}
.slideshow_dots {
position: absolute;
bottom: 10%;
left: 50%;
transform: translate(-50%, -50%);
color: #717171;
}
/* Slideshow */
.slideshow1 .mySlides {
display: none;
height: 75vh;
}
.slideshow1 .mySlides img {
height: 100%;
object-fit: cover;
}
.slideshow1 .slideshow-container {
position: absolute;
left: 0;
top: 0;
right: 100%;
bottom: 100%;
width: 100%;
}
/* Next & previous buttons */
.slideshow1 .prev, .slideshow1 .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
background-color: dodgerblue;
}
/* Position the "next button" to the right */
.slideshow1 .next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.slideshow1 .prev:hover, .slideshow1 .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* The dots/bullets/indicators */
.slideshow1 .dot {
cursor: pointer;
font-size: 12px;
margin: 0 5px;
color: #717171;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.slideshow1 .active, .slideshow1 .dot:hover {
color: #bbb;
}
/* Fading animation */
.slideshow1 .fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 2s;
animation-name: fade;
animation-duration: 2s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
.slideshow2 {
width: 100%;
height: 500px;
margin: 30px 0;
position: relative;
}
.slideshow2 .img {
width: 50%;
height: 500px;
float: left;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
}
.slideshow2 .subdiv {
width: 50%;
height: 500px;
float: left;
padding: 10px 5% 10px 2%;
display: table;
box-shadow: outset -200px 0 110px 0 #000000;
}
.slideshow2 .subdiv .wrapper {
display: table-cell;
vertical-align: middle;
}
.slideshow2 .subdiv .wrapper #quote {
color: #2b2b2b;
line-height: 30px;
margin-top: 25px;
font-size: 20px;
letter-spacing: 1.5px;
}
.slideshow2 .subdiv .wrapper #quoter {
color: #747474;
margin-top: 25px;
font-size: 20px;
}
/*Slideshow*/
.slideshow2 .slideshow-container {
height: 100%;
width: 100%;
}
.slideshow2 .slide-1 {
}
.slideshow2 .slide-1 .img {
background-image: linear-gradient(to right, rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%), url(https://cdn.pixabay.com/photo/2014/12/15/17/16/pier-569314__180.jpg);
}
.slideshow2 .slide-2 {
}
.slideshow2 .slide-2 .img {
background-image: linear-gradient(to right, rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%), url(https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__180.jpg);
}
.slideshow2 .slide-3 {
}
.slideshow2 .slide-3 .img {
background-image: linear-gradient(to right, rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%), url(https://cdn.pixabay.com/photo/2016/03/04/19/36/beach-1236581__180.jpg);
}
/* Next & previous buttons */
.slideshow2 .prev, .slideshow2 .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
background-color: dodgerblue;
}
/* Position the "next button" to the right */
.slideshow2 .next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.slideshow2 .prev:hover, .slideshow2.next:hover {
background-color: rgba(0,0,0,0.8);
}
JavaScript
var slideIndex = 0;
showSlides();
var slides,dots;
function showSlides() {
var i;
slides = document.getElementsByClassName("mySlides");
dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 8000); // Change image every 8 seconds
}
function plusSlides(position) {
slideIndex +=position;
if (slideIndex> slides.length) {slideIndex = 1}
else if(slideIndex<1){slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
function currentSlide(index) {
if (index> slides.length) {index = 1}
else if(index<1){index = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[index-1].style.display = "block";
dots[index-1].className += " active";
}