切换图像时，为什么幻灯片显示在菜单上方？

Question

我的网页上有幻灯片放映。 它使用以下脚本从图像切换：

 setInterval(function() { $('#slideshow > div:first') .fadeOut(0) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); }, 7000); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="slideshow" name="slideshow" class="slideshow"> <div> <img src='{ROOT}img/Camerashop24/slide1.jpg' alt="slide-1" class="slide"> </div> <div> <img src='{ROOT}img/Camerashop24/slide2.jpg' alt="slide-2" class="slide"> </div> <div> <img src='{ROOT}img/Camerashop24/slide3.jpg' alt="slide-3" class="slide"> </div> <div> <img src='{ROOT}img/Camerashop24/slide4.jpg' alt="slide-4" class="slide"> </div> </div> 

但是，在更改幻灯片时，幻灯片将显示在下拉菜单上方，直到完全加载为止。 然后它又回到菜单后面。 菜单的z索引为100，幻灯片的z索引为10。如果需要，我可以提供菜单的CSS，但这很长。

为什么切换时菜单上方的幻灯片显示？

Answer 1

使用此代码，幻灯片可以正常工作...

 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, 2000); // Change image every 2 seconds } 

 <div id="slideshow" name="slideshow" class="slideshow"> <img class="mySlides" src='{ROOT}img/Camerashop24/slide1.jpg' alt="slide-1" class="slide"> <img class="mySlides" src='{ROOT}img/Camerashop24/slide2.jpg' alt="slide-2" class="slide"> <img class="mySlides" src='{ROOT}img/Camerashop24/slide3.jpg' alt="slide-3" class="slide"> <img class="mySlides" src='{ROOT}img/Camerashop24/slide4.jpg' alt="slide-4" class="slide"> </div>