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

时间:2019-05-09 19:46:45

标签: javascript html slideshow

我有一个菜单的文本幻灯片。在幻灯片放映的第一张幻灯片上,页脚很好。对于第二,第三,第四,第五和第七张幻灯片,页脚转到页面的中间。第6页脚也很好。幻灯片由箭头手动控制。如果已回答,请引导我到主题。这与简单的“脚不在脚下”不同。 (页脚在网站的其他页面上看起来还不错)很抱歉,代码太长了,但是我不得不说所有这些以充分显示问题

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

//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>

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

1 个答案:

答案 0 :(得分:0)

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