3-5 编程练习：jQuery实现简单的图片对应展示效果

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>

 

posted @ 2019-06-06 16:06  请叫我二狗哥  阅读(301)  评论(0)    收藏  举报