我右边的图片改变了幻灯片，但左边的图片卡在了第一张幻灯片上

Question

我并排创建了两个不断变化的图片库，但我的右图改变了幻灯片，而左图卡在了第一张幻灯片上。 有谁知道为什么？ 我在 W3.CSS 上找到了代码，但我将 class“changing-photo-right”和“changing-photo-left”更改为我自己的 class 之一（可以在我的 css 样式表中找到）并且没有链接W3.css 的样式表。

 .section2 { background: #F5DAD3; display: flex; height: 750px; position: relative; }.changing-photo-left { float: left; margin-left: 125px; margin-top: -390px; position: relative; display: block; }.changing-photo-right { float: right; margin-right: 125px; margin-top: -390px; position: relative; display: block; }.section3 { height: 440px; width: 2px; top: 160px; left: 50%; position: absolute; border: 0px solid black; background-color: black; border-radius: 20px; }

 <div class="hmm"> <div class="section2"></div> <div class="section3" ></div> <div> <p class="text-12">The interieur</p> <p class="text-11">Discover the lovely interieur that was built since 1948.</p> <a class="button-intro-below-left" href="">Click here for more</a> <div class="changing-photo-left" style="max-width:500px"> <img class="mySlides" src="009.jpg" style="width:100%"> <img class="mySlides" src="062.jpg" style="width:100%"> <img class="mySlides" src="027.jpg" style="width:100%"> </div> <script> var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 2500); // Change image every 3 seconds } </script> </div> <div> <p class="text-13">The exterior</p> <p class="text-14">Discover the lovely exterior that was built since 1948.</p> <a class="button-intro-below-right" href="">Click here for more</a> <div class="changing-photo-right" style="max-width:500px"> <img class="mySlides1" src="009.jpg" style="width:100%"> <img class="mySlides1" src="012.jpg" style="width:100%"> <img class="mySlides1" src="013.jpg" style="width:100%"> </div> <script> var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides1"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 2500); // Change image every 3 seconds } </script> </div>

Answer 1

您在两个循环中为variables和functions使用了相同的名称。 如果您在第二个循环中更改variables和functions的名称，一切都会正常进行。

 .section2 { background: #F5DAD3; display: flex; height: 750px; position: relative; }.changing-photo-left { float: left; margin-left: 125px; margin-top: -390px; position: relative; display: block; }.changing-photo-right { float: right; margin-right: 125px; margin-top: -390px; position: relative; display: block; }.section3 { height: 440px; width: 2px; top: 160px; left: 50%; position: absolute; border: 0px solid black; background-color: black; border-radius: 20px; }

 <div class="hmm"> <div class="section2"></div> <div class="section3" ></div> <div> <p class="text-12">The interieur</p> <p class="text-11">Discover the lovely interieur that was built since 1948.</p> <a class="button-intro-below-left" href="">Click here for more</a> <div class="changing-photo-left" style="max-width:500px"> <img class="mySlides" src="https://images.unsplash.com/photo-1672426142068-c2103a852426?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&w=1000&q=80" style="width:100%"> <img class="mySlides" src="https://media.istockphoto.com/id/1409254639/photo/autumn-drive.jpg?b=1&s=170667a&w=0&k=20&c=phQOICvfLifPWESZu3AioY7sKM9s_HQnCozMKF6g120=" style="width:100%"> <img class="mySlides" src="https://media.istockphoto.com/id/1427249962/photo/tropical-leaves-abstract-green-leaf-texture-in-garden-nature-background.jpg?b=1&s=170667a&w=0&k=20&c=40KcV7mbAQWihuO0At8GSOTIKp-TvIoHGIhurHBeUq0=" style="width:100%"> </div> <script> var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 2500); // Change image every 3 seconds } </script> </div> <div> <p class="text-13">The exterior</p> <p class="text-14">Discover the lovely exterior that was built since 1948.</p> <a class="button-intro-below-right" href="">Click here for more</a> <div class="changing-photo-right" style="max-width:500px"> <img class="mySlides1" src="https://images.unsplash.com/photo-1672426142068-c2103a852426?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&w=1000&q=80" style="width:100%"> <img class="mySlides1" src="https://media.istockphoto.com/id/1409254639/photo/autumn-drive.jpg?b=1&s=170667a&w=0&k=20&c=phQOICvfLifPWESZu3AioY7sKM9s_HQnCozMKF6g120=" style="width:100%"> <img class="mySlides1" src="https://media.istockphoto.com/id/1427249962/photo/tropical-leaves-abstract-green-leaf-texture-in-garden-nature-background.jpg?b=1&s=170667a&w=0&k=20&c=40KcV7mbAQWihuO0At8GSOTIKp-TvIoHGIhurHBeUq0=" style="width:100%"> </div> <script> var myIndex1 = 0; carousel1(); function carousel1() { var j; var y = document.getElementsByClassName("mySlides1"); for (j = 0; j < y.length; j++) { y[j].style.display = "none"; } myIndex1++; if (myIndex1 > y.length) {myIndex1 = 1} y[myIndex1-1].style.display = "block"; setTimeout(carousel1, 2500); // Change image every 3 seconds } </script> </div>