为什么我的实现不了效果？麻烦老师了

来源：3-4 行为层

安分小兔纸

2019-05-03 23:00:41

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>全屏的云南旅游相册</title>
 <link rel="stylesheet" type="text/css" href="css/index1.css">
  <script type="text/javascript" src="js/jquery.js"></script>
     <script type="text/javascript" src="js/index1.js"></script>
</head>
<body>
 <span></span>
 <nav>
  <a href="javascript:;">泸沽湖</a>
        <a href="javascript:;">丽江古城</a>
        <a href="javascript:;">茶马古道</a>
        <a href="javascript:;">就这家·云逸客栈</a>
        <a href="javascript:;">西双版纳</a>
        <a href="javascript:;">云南红酒庄</a>
        <a href="javascript:;">轿子雪山</a>
        <a href="javascript:;">普者黑</a>
        <a href="javascript:;">海埂大坝</a>
        <a href="javascript:;">玉龙湾</a>
        <a href="javascript:;">昆明郊野公园</a>
        <a href="javascript:;">欧洲风琴小镇</a>
 </nav>
 <div>
  <img src="images/1.jpg">
  <img src="images/2.jpg">
  <img src="images/3.jpg">
  <img src="images/4.jpg">
  <img src="images/5.jpg">
  <img src="images/6.jpg">
  <img src="images/7.jpg">
  <img src="images/8.jpg">
  <img src="images/9.jpg">
  <img src="images/10.jpg">
  <img src="images/11.jpg">
  <img src="images/12.jpg">
 </div></body>
</html>

*{
 margin:0;
 padding: 0
 border:none;
}
body{
 height: 100%;
 background-color:#93b3c6;
}
span{
 display: block;
 text-align: center;
 width: 16px;
 height: 16px;
    margin: 30px auto 40px;
    border-radius: 50%;
    background: #fff;
}
nav{
    margin:20px auto 10px;
    position: relative;
    width:78.125%;
    display: flex;
    justify-content: space-between;
}
nav:before{
    width:100%;
    height:10px;
    position: absolute;
    background: #fff;
    top:20px;
    display: block;
    content:''; /* 显示内容 */
}
nav > a{
    position: relative;
    font-size:20px;
    text-decoration: none;
    padding:10px;
    border:2px solid #5395b4;
    color:#255d7e;
    background: #fff;
}
div{
 position: relative;
 overflow: hidden;/* 超过边界则隐藏 */
 width: 78.125vw;
 height: 75vh;
 background: #fff;/* 白色边框 */
 box-shadow: 0 0 30px 0 rgba(8,1,3,0.3);/* 设置阴影。水平偏移为0，竖直偏移为0，往外模糊30px、往内模糊0. */
 margin:20px auto;
}
div img{
 width: 98%;
 height: 96%;
 position:absolute;
 top: 0;bottom: 0;left: 0;right: 0;
 margin: auto;
}

$(document).ready(function(){
 $('a').click(function(){/*点击a标签触发事件*/
  $('img')
  .eq($(this).index())
  .css({'opacity'：'1'})/*先确定第几张图片，然后控制相应图片的透明度*/
  .siblings()
  .css({'opacity':'0'});/*在控制其他图片的透明度为0；*/
 })
})

写回答

1回答