java 图片幻灯片,不需要的java脚本图片幻灯片动画覆盖与网站 Headers

Problem/ Observation 我的图片幻灯片动画框位于固定 Headers 的正下方(这不是问题) . 当我第一次加载页面时，固定 Headers 和图片框之间没有叠加 . 但是，当我单击左右(下一个和上一个)箭头来更改图片时，图片的隐藏部分会显示，因此会在动画期间覆盖固定 Headers ，然后再次隐藏在固定 Headers 后面 .

How do i stop this overlay behaviour so that the picture box always stays behind the header?

该网站包括改编自以下来源的图片幻灯片动画：

我的header.php文件具有以下结构

1. Home
2. About This site
3. Learn
4. Sponsor Me

标头的CSS

*{

padding:0;

text-decoration: none;

}

header{

background-color: white;

color: white;

position:fixed;

top:0;

border-bottom:1px solid #1e204c;

display: block;

width:100%;

}

ol {

display:inline-block;

}

a:link{

color:black;

}

.menu{

display:inline-block;

font-size:16px;

font-family: 'Roboto', sans-serif;

padding:0px 40px 0px 40px;

position:relative;

bottom:30px;

left:700px

}

如果您不想关注该链接，我已复制并粘贴了下面的 my adapted 标记和脚本 .

HTML

在此处输入代码

1/3 div> - > Headers

2/3 div> - > Headers

3/3 div> - > Headers

❮❮

用于图像幻灯片的CSS

.mySlides {身高：400px;宽度：100％;溢出：隐藏;

} / 下一个和上一个按钮 / .previus，.next {cursor：pointer;位置：绝对;上：300px;填充：16px;白颜色; font-weight：bold; font-size：18px;溢出：隐藏;

/ *允许在给定时间范围内改变属性Ease指定一种类型的转换，其开始和结束缓慢但在时间刻度的中间某处加速 . * /过渡：0.6s轻松; border-radius：0 3px 3px 0; }

/ 将“下一个按钮”放在右边 / .next {right：2px; border-radius：3px 0 0 3px; }

.previus {left：2px; border-radius：3px 0 0 3px; }

/ 在悬停时，添加一个带有一点透明的黑色背景颜色 / .previus：hover，.next：hover {background-color：rgba(0,0,0,0.8); }

/ 点/项目符号/指示符 / .bulletIndicators {cursor：pointer;身高：13px;宽度：13px; background-color：#bbb; border-radius：50％; display：inline-block;过渡：背景色0.6s轻松;

} / *：active必须在：在CSS定义中悬停(如果存在)才能生效！ * /.active，.bulletIndicators：hover {background-color：＃717171; }

/ 使用webkit Webkit的淡化动画是一个块元素，带有一组名为Keyframes的规则集，可用于在给定的设定时间内设置样式 / .fade {-webkit-animation-name：fade; -webkit-animation-duration：1.5s;动画名称：淡化;动画持续时间：1.5s;溢出：隐藏;

}

@ -webkit-keyframes fade {from {opacity：.4} to {opacity：1}} / * fading alpha level-请记住，如果框显示设置为none，那么你应该看到背景colout简短* / @ keyframes fade {从{不透明度：.4}到{不透明度：1}}

Java脚本

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”); var dots = document.getElementsByClassName(“bulletIndicators”); if(n> slides.length)if(n <1) for(i = 0; i