讓幻燈片點停留在同一個地方

Question

我正在制作幻燈片，下面有一些小圓點來顯示你現在的照片。 但是，我似乎無法讓小點停留在同一個地方，它們會隨着每張圖片而切換。 我試過把它做成一個單獨的<div> ， position: fixed; 等，但是它們沒有居中，或者沒有頁腳，但是頁面高度太長了？ 我做錯了什么，但我不知道是什么！

這是我的一些代碼：

 .menu { width: 10%; } .main { height: 100vh; max-width: 100%; width: 90%; display: inline-block; float: right; padding: 20px; margin-top: 0%; } * { box-sizing: border-box } /* Slideshow container */ .slideshow-container { max-width: 100%; position: relative; margin-left: auto; margin-right: auto; display: block; top: 19%; } /* Hide thimages by default */ .mySlides { margin: 0px auto; max-width: 100%; margin-left: auto; margin-right: auto; display: block; text-align: center; margin-bottom: 100px; } .dots { margin-right: 50px; } /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 3px; background-color: #DBC6D7; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #FF0004; }

 <!-- Slideshow container --> <main> <div class="main"> <div class="slideshow-container"> <!-- Full-width images with number and caption text --> <div class="mySlides fade"> <img src="3D/plant2.jpg" alt="House plant cactus" onMouseOver="this.src='3D/PLANT2.GIF'" onMouseOut="this.src='3D/plant2.jpg'" class="ogen"> </div> <div class="mySlides fade"> <img src="3D/plant1.jpg" onMouseOver="this.src='3D/plant1.GIF'" onMouseOut="this.src='3D/plant1.jpg'" alt="house plant" class="ogen"> </div> <div class="mySlides fade"> <img src="3D/plant3.jpg" onMouseOver="this.src='3D/plant3.GIF'" onMouseOut="this.src='3D/plant3.jpg'" alt="house plant aloe vera" class="ogen"> </div> <div class="mySlides fade"> <img src="3D/raam.jpg" onMouseOver="this.src='3D/raam2.jpg'" onMouseOut="this.src='3D/raam.jpg'" alt="window painted" class="window"> </div> <div class="mySlides fade"> <img src="3D/phone.jpg" onMouseOver="this.src='3D/phone2.jpg'" onMouseOut="this.src='3D/phone.jpg'" alt="phone" class="phone"> </div> <!-- The dots/circles --> <div class="dots" style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> <span class="dot" onclick="currentSlide(4)"></span> <span class="dot" onclick="currentSlide(5)"></span> <span class="dot" onclick="currentSlide(6)"></span> </div> <!-- Next and previous buttons --> <a onclick="plusSlides(-1)"> <img src="text/leftarrow_1.png" class="prev" alt="previous" /> </a> <a onclick="plusSlides(1)"><img src="text/rightarrow.png" class="next" alt="next" /></a> </div> <br> </div> </main>

Answer 1

您可能想給.mySlides一個height