IMG Silde更改功能在具有两个功能时停止工作

Question

我有一个函数，它每5秒更改一次容器的图像，效果很好。问题是，我试图并排添加两个容器，然后同时更改它们的图像，但当我为两个容器运行函数时，只有一个容器img开始更改，另一个保持静止，但如果我运行其中一个函数，它会正常工作，并开始更改img。如何使两个容器每5秒更改一次img。如有任何帮助，我们将不胜感激。提前谢谢。

let index = 0;
const slides1 = document.querySelectorAll(".mainDisplay1 .slide1");
function change1() {
if (++index >= slides1.length)
index = 0;
for (let i = 0; i < slides1.length; i++)
slides1[i].classList.toggle("active1", i == index);
}
const slides2 = document.querySelectorAll(".mainDisplay2 .slide2");
function change2() {
if (++index >= slides2.length)
index = 0;
for (let i = 0; i < slides2.length; i++)
slides2[i].classList.toggle("active2", i == index);
}
//calling one of the 2 functions work but only one of them works when calling both

window.onload = function() {
setInterval(change1, 5000);
};
window.onload = function() {
setInterval(change2, 5000);
};

.mainDisplay1 {
position: absolute;
top: 8%;
left: 0%;
border-radius: 2%;
-webkit-box-shadow: 10px 3px 31px 6px rgba(0, 0, 0, 0.77);
box-shadow: 10px 3px 31px 6px rgba(0, 0, 0, 0.77);
}
.mainDisplay1 img {
width: 50%;
height: 600px;
}
.mainDisplay2 {
position: absolute;
top: 8%;
left: 0%;
border-radius: 2%;
-webkit-box-shadow: 10px 3px 31px 6px rgba(0, 0, 0, 0.77);
box-shadow: 10px 3px 31px 6px rgba(0, 0, 0, 0.77);
}
.mainDisplay2 img {
width: 50%;
height: 600px;
float: right;
}
.slide1 {
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
position: absolute;
}
.active1 {
opacity: 1;
z-index: 2;
position: initial;
}
.slide2 {
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
position: absolute;
}
.active2 {
opacity: 1;
z-index: 2;
position: initial;
}

<div class="mainDisplay1">
<img class="slide1 active1" src="Img1.jpg">
<img class="slide1" src="Img2.jpg">
<img class="slide1" src="Img3.jpg">
<img class="slide1" src="Img4.jpg">
</div>
<div class="mainDisplay2">
<img class="slide2 active2" src="Img5.jpg">
<img class="slide2" src="Img6.jpg">
<img class="slide2" src="Img7.jpg">
<img class="slide2" src="Img8.jpg">
</div>

Answer 1

每次调用函数时都需要获得节点列表，并且需要将index变量彼此分离，或者加倍递增。此外，当您向window.onload添加两个不同的函数时，最新的函数将覆盖第一个函数，这意味着第一个函数现在永远不会被调用。

let index1 = 0;
let index2 = 0;
function change1() {
const slides1 = document.querySelectorAll(".mainDisplay1 .slide1");
if (++index1 >= slides1.length)
index1 = 0;
for (let i = 0; i < slides1.length; i++)
slides1[i].classList.toggle("active1", i == index1);
}

function change2() {
const slides2 = document.querySelectorAll(".mainDisplay2 .slide2");
if (++index2 >= slides2.length)
index2 = 0;
for (let i = 0; i < slides2.length; i++)
slides2[i].classList.toggle("active2", i == index2);
}

window.onload = function() {
setInterval(change1, 5000);
setInterval(change2, 5000);
};

.mainDisplay1 {
position: absolute;
top: 8%;
left: 0%;
border-radius: 2%;
-webkit-box-shadow: 10px 3px 31px 6px rgba(0, 0, 0, 0.77);
box-shadow: 10px 3px 31px 6px rgba(0, 0, 0, 0.77);
}
.mainDisplay1 img {
width: 50%;
height: 600px;
}
.mainDisplay2 {
position: absolute;
top: 8%;
left: 0%;
border-radius: 2%;
-webkit-box-shadow: 10px 3px 31px 6px rgba(0, 0, 0, 0.77);
box-shadow: 10px 3px 31px 6px rgba(0, 0, 0, 0.77);
}
.mainDisplay2 img {
width: 50%;
height: 600px;
float: right;
}
.slide1 {
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
position: absolute;
}
.active1 {
opacity: 1;
z-index: 2;
position: initial;
}
.slide2 {
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
position: absolute;
}
.active2 {
opacity: 1;
z-index: 2;
position: initial;
}

<div class="mainDisplay1">
<img class="slide1 active1" src="https://via.placeholder.com/250?text=Img1">
<img class="slide1" src="https://via.placeholder.com/250?text=Img2">
<img class="slide1" src="https://via.placeholder.com/250?text=Img3">
<img class="slide1" src="https://via.placeholder.com/250?text=Img4">
</div>
<div class="mainDisplay2">
<img class="slide2 active2" src="https://via.placeholder.com/250?text=Img5">
<img class="slide2" src="https://via.placeholder.com/250?text=Img6">
<img class="slide2" src="https://via.placeholder.com/250?text=Img7">
<img class="slide2" src="https://via.placeholder.com/250?text=Img8">
</div>

Answer 2

尝试调用您的onload函数，例如：

window.onload = function() {
setInterval(function() {
change1();
change2();
}, 5000);
}

您不能多次呼叫onload。