首页 文章

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

提问于
浏览
2

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文件具有以下结构

<header> 
<img  src="img/logo.png" width="400" height="120" alt="site logo"/>

            <ol >
                <li class="menu"> <a  href="index.php">Home</a> </li>   
                <li  class="menu"> <a href='about.php'>About This site </a> </li>   
                <li  class="menu"> <a href='learn.php'> Learn</a> </li>   
                <li  class="menu"> <a href='sponser.php'> Sponsor Me </a></li>     
            </ol>   
</header>
  • 标头的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

在此处输入代码

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

1/3 </ div> - > Headers

2/3 </ div> - > Headers

3/3 </ div> - > Headers

❮❮

<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 {身高: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 <slides.length; i){slides [i] .style . display =“none”; } for(i = 0; i <dots.length; i){dots [i] .className = dots [i] .className.replace(“active”,“”); } slides [slideIndex-1] .style.display =“block”;点[slideIndex-1] .className =“active”; }

2 回答

  • 0

    我不小心碰到了 'z-index' property ,同时看着不同的方式在css中移动箱子 . 我把它设置为一个很高的值,在我的情况下,我设置 z-index=30; within the header selector. 我'm not sure if this works for all elements because i don'知道他们各自的默认z-indices .

    header{
        background-color: white;
        color: white;
        position:fixed;
        top:0;
        border-bottom:1px solid #1e204c;
        display: block;
        width:100%; 
        z-index=30;
    }
    
  • 0

    尝试在要放在上面的对象上使用编号最大的z-index属性 . 前

    header{
      z-index: 99;
    }
    

相关问题