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;
}

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