时间戳

首页 > 解决方案 > 为什么页脚只停留在幻灯片的第一张幻灯片的底部？

javascript - 为什么页脚只停留在幻灯片的第一张幻灯片的底部？

问题描述

我有一个菜单的文本幻灯片。在幻灯片的第一张幻灯片上，页脚很好。对于第二张、第三张、第四张、第五张和第七张幻灯片，页脚位于页面中间。第 6 页脚也很好。滑块由箭头手动控制。如果已经回答，请引导我到一个线程。这与简单的“页脚不停留在底部”不同。（页脚在网站的其他页面上看起来很好）很抱歉代码太长，但我不得不说所有这些以充分显示问题

我尝试在每张幻灯片下都使用  ，而不是只在底部使用一个。我试过调整幻灯片的最大宽度。

//SLIDE CSS
* {box-sizing: border-box}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 800px;
  position: relative;
  margin: auto;
}
//FOOTER CSS

footer {

   background: teal;
    bottom: 0;
    width: 100%;
    padding: 10px;
    color: white;

}


//HTML CODE
<div class="slideshow-container">
//this one hs normal footer
<div class="mySlides fade">
  <div class="numbertext">1 / 7</div>
 <span class = "left" style = "width: 35%;">
//content
</span>
<span class = "left" style = "width: 30%;">
//content
</span>
<span class = "left" style = "width: 35%;">
//content
</span>
</br>
</br>
</div>


// only showed two slides to shorten code

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

&nbsp;

</div>
// J A V A  S C R I P T
<script language = "javascript">
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  slides[slideIndex-1].style.display = "block";  
}
</script></br>
//F O O T E R  C O D E
<footer style = "line-height: 70px" class = "footer">
<div class = "foot1">
<div class = "foottitle">Restaurant</div>
</div>
<div class = "foot2">
<div class = "ul2">
  <div class = "footsub">VISIT US</div>
  <div class = "li2">Address</div>
  <div class = "li2">Blah blah</div>
  <div class = "li2">city zipcode</div>
</div>
</div>
</footer>

当我在所有幻灯片上时，我希望页面的页脚位于底部

标签： javascripthtmlslideshow

解决方案

如果您使用“相关”之类的任何定位和“底部”之类的偏移量，那么我认为您也可以通过删除页脚和滑块上的定位来设置它。如果它不起作用，那么是否有任何实时链接，如果它不是实时的，那么滑块的主包装上应用了什么样式？

推荐阅读