Javascript 幻灯片放映不起作用 - 外观不正确

Question

我的网页顶部的幻灯片横幅出现了一些问题。我尝试按照 W3 教程进行操作，但运气不佳。所以，下面是我的代码:

HTML:

<div class="slide-content" style="max-width:1000px"> <img class="slidepic" src="testheadphoto.jpg" style="width:100%" border="0" /> <img class="slidepic" src="testphototwo.jpg" style="width:100%" border="0" /> 
  <div class="slide-center slide-section slide-large slide-text-white slide-display-bottommiddle" style="width:100%"> 
    <div class="slide-left slide-padding-left slide-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>

    <div class="slide-right slide-padding-right slide-hover-text-khaki" onclick="plusDivs(-1)">&#10095;</div>

<span class="slide-stamp demo slide-border slide-transparent slide-hover-white" _="_" span="span"> <span class="slide-stamp demo slide-border slide-transparent slide-hover-white" onclick="currentDiv(1)"></span> <span class="slide-stamp demo slide-border slide-transparent slide-hover-white" onclick="currentDiv(2)"></span> </span> </div>

CSS:

.slide {

    display:none;

}

.slide-left, .slide-right, .slide-stamp {

    cursor: pointer;

}

.slide-stamp {

    height: 13px;

    width: 13px;

    padding: 0;

}

Javascript:

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("slidepic");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" slide-white", "");
  }
  x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " slide-white";
}

此时，两张图片同时出现在页面上，右箭头和左箭头在它们的下方。单击箭头时，其中一张图片消失，幻灯片有效地工作。它看起来并不像它应该的那样。我附上了两张图片(一张是幻灯片的外观，另一张是我的样子。一如既往，非常感谢您的帮助!

谢谢

Answer 1

您的图片断行，因为容器设置不正确。

在你的 CSS 中，尝试:

.slide-content {
    white-space: nowrap;
}

我还建议将您的控件放入同一个容器中，并将它们绝对定位到各自的 Angular 落，并设置 z-index 以确保它们位于滑入的图像之上。