Java脚本图片幻灯片动画与网站标题不需要的重叠

幻灯片动画链接（html，css＆js）

标题的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   
}

HTML

在此处输入代码

  <?php include 'header.php'; ?>
  <!--photos-->    
  <div class='main'>

1/3 </ div> - >标题

2/3 </ div> - >标题

3/3 </ div> - >标题

❮❯

    <div style="text-align:center">
   <!-- span is an inline version of a div-->
<span class="bulletIndicators" onclick="currentSlide(1)"></span> 
<span class="bulletIndicators" onclick="currentSlide(1)"></span> 
<span class="bulletIndicators" onclick="currentSlide(1)"></span> 

图像幻灯片的CSS

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

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

/ *允许在给定的时间范围内改变属性易于指定一种转换类型，其开始和结束较慢但在时间表中间的某个位置加速。 * /过渡：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 {光标：指针; 身高：13px; 宽度：13px; background-color：#bbb; 边界半径：50％; 显示：inline-block; 过渡：背景色0.6s缓解;

} / *：活动必须在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 {从{opacity：.4}到{opacity：1}} / *渐变alpha级别 - 记住，如果框的显示设置为none，那么您应该会短暂地看到背景灯* / @keyframes褪色{from {opacity：.4} to {opacity：1}}

Java的脚本

var slideIndex = 1; showSlides（slideIndex）;

函数plusSlides（n）{showSlides（slideIndex + = n）; }

函数currentSlide（n）{showSlides（slideIndex = n）; }

函数showSlides（n）{var i; var slides = document.getElementsByClassName（“mySlides”）; var dots = document.getElementsByClassName（“bulletIndicators”）; if（n> slides.length）{slideIndex = 1;} if（n <1）{slideIndex = slides.length;} for（i = 0; i <slides.length; i ++）{slides [i] .style。 display =“none”; } for（i = 0; i <dots.length; i ++）{dots [i] .className = dots [i] .className.replace（“active”，“”）; }幻灯片[slideIndex-1] .style.display =“block”; dots [slideIndex-1] .className + =“active”; }