幻灯片动画链接（html， css

我的头球。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>

>

*{
    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   
}

如果你不想跟随链接，我已经在下面复制并粘贴了我的修改过的标记和脚本。

>

超文本标记语言

在此输入代码

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

1/3

2/3

3/3

❮ ❯

    <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%；溢出：隐藏；

}/*下一个

/*允许在给定的时间刻度中改变属性，便于指定一种类型的过渡，该过渡开始和结束缓慢，但在时间尺度的中间某个地方加速。*/过渡：0.6s缓解；边界半径：0 3px 3px 0；}

/*将“下一步按钮”置于右侧*/。下一个{右：2px；边界半径：3px 0 0 3px；}

.previus{左：2px；边界半径：3px 0 0 3px；}

/*在悬停时，添加一个黑色背景色，带有一点透明*/。普雷维乌斯：悬停。下一步：悬停{背景色：rgba（0,0,0,0.8）；}

/*点/项目符号/指示器*/。bulletIndicators{光标：指针；高度：13px；宽度：13px；背景色：#bbb；边框半径：50%；显示：内联块；过渡：背景色0.6s；

}/*： active必须在：悬停（如果存在）在CSS定义后才能有效！*/. active，. bulletIndex： hover{背景颜色：#717171；}

/*使用webkit的渐变动画Webkit是一个块元素，其中包含一组称为关键帧的规则集，可用于在给定的设置时间内对其进行样式化*/。褪色{-webkit-动画-名称：褪色；-webkit-动画-持续时间：1.5s；动画-名称：褪色；动画-持续时间：1.5s；溢出：隐藏；

}

@-webkit关键帧淡出{从{opacity:.4}到{opacity:1}}/*淡出alpha级别-请记住，如果框显示设置为“无”，则您应该短暂地看到背景颜色*/@关键帧淡出{从{opacity:.4}到{opacity:1}

Java脚本

var slideIndex=1；放映幻灯片（幻灯片索引）；

函数plusSlides（n）{showSlides（slideIndex=n）；}

函数当前幻灯片（n）{显示幻灯片（幻灯片索引=n）；}

函数show Slides（n）{var i； var幻灯片=document.getElementsByClassName（"mySlides"）； var dots=document.getElementsByClassName（"BulletIndex"）； if（n