3-5 编程练习：jQuery实现简单的图片对应展示效果
通过这个章节的学习， 老师带领大家完成了一个基本的图片切换特效，接下来，我们也实现一个类似的效果，点击相应的按钮，切换对应的图片。
效果图 :
任务
1、首先建立一个就绪函数ready函数，把所有的jQuery内容都写到这个函数中。
2、选中按钮元素并绑定单击事件
3、选中img图片，通过eq()方法找到对应的图片元素
4、其中eq()的参数通过$(this).index()方式获取当前的索引。
5、通过css()方法对图片的透明度设置为1来显示。
6、再通过siblings()找到当前选中按钮的兄弟元素，并通过css()设置透明度为0。
任务提示
1、可以使用链式语法进行编码。
2、参考课程中老师的方式实现此效果。
参考代码：
<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
.container {
width: 240px;
height: 185px;
margin: 0 auto;
overflow: hidden;
} .conTitle {
height: 50px;
} nav {
width: 25%;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
background-color: #000;
font-weight: bold;
color: #fff;
cursor: pointer;
} nav:hover {
background-color: #ddd;
color: #000;
} .content {
position: relative;
} .img1 {
opacity: 1;
} img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
max-width: 100%;
}
</style>
</head><body>
<div class="container">
<div class="conTitle">
<nav>pwa</nav>
<nav>node</nav>
<nav>vue</nav>
<nav>小程序</nav>
</div>
<div class="content">
<img class="img1" src="img/banner1.jpg" />
<img class="img2" src="img/banner2.jpg" />
<img class="img3" src="img/banner3.jpg" />
<img class="img4" src="img/banner4.jpg" />
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("nav").click(function () {
// 此处写代码
$('img')
.eq($(this).index())
.css({'opacity':'1'})
.siblings()
.css({'opacity':'0'})
})
})
</script>
</body></html>
