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>

3-5 编程练习：jQuery实现简单的图片对应展示效果的更多相关文章

  1. [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构

    写在前面 前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病 ...

  2. 使用jQuery做简单的图片轮播效果

      一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...

  3. jQuery实现简单的图片淡入淡出效果

    整体思路: 1.实现页面布局,设置css样式 2.用jQuery获取需要用到的变量 3.用jQuery为两个按钮绑定事件 一.页面布局: <div class="d1"> ...

  4. [JQuery]用InsertAfter实现图片走马灯展示效果

    写在前面 最近一个搞美工的朋友让我给他写一个图片轮播的特效. 需求: 图片向左循环滚动. 图片滚动到中间高亮显示,并在下方显示照片人物对应的信息. 鼠标悬停止滚动. 鼠标离开开始滚动. 单击图片,图片 ...

  5. 【三石jQuery视频教程】01.图片循环展示

    视频地址:http://v.qq.com/page/e/5/t/e0149n5he5t.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...

  6. 【三石jQuery视频教程】01.图片循环展示_再次重发

    之前的文章,由于在博文的底部放有微信公众号的缘故,被管理员判定为: 您好,您的这篇博文内容本身没什么问题,但是,在博文底部存在推广信息内容.... 你们也没告知到底是哪条触犯了博客园的规矩,我就把底部 ...

  7. 基于jquery鼠标点击图片翻开切换效果

    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  8. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

  9. JQuery实现简单的服务器轮询效果

    很多论坛都有进入后,弹出提示,说有多少封邮件没有看,或者是一个oa系统,进入后,提示有多少个任务没有做.每隔一段时间会提示一次,但是如何实现呢.其实,利用jquery的话,会比较简单,核心元素就是js ...

随机推荐

  1. DP 简单题目练习

    ZOJ 1234 这道题目我表示也还不是特别能理解....还是太菜了T T 从后往前思考,因为只要后面有多的数在,那么C肯定是存在的,只要考虑是否把前两个数加在一起作为badness值这样两种情况来考 ...

  2. 对付 MySQL 的死连接，Sleep的进程的来源探究[转]

    当前的连接数:mysql> show status like '%Threads_connected%';+-------------------+-------+| Variable_name ...

  3. 创建Django项目（一）

    2013-07-24 23:20:58|   最近在学习Django项目的创建,主要的参考资料是:Djangobook 和 Django Project.这些日志用来记录自己的学习过程吧.       ...

  4. [bzoj1874][BeiJing2009 WinterCamp]取石子游戏_博弈论

    取石子游戏 bzoj-1874 BeiJing2009 WinterCamp 题目大意:题目链接. 注释:略. 想法: 我们通过$SG$函数的定义来更新$SG$的转移. 如果是寻求第一步的话我们只需要 ...

  5. 搬砖--杭电校赛（dfs）

    搬砖 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total Submissi ...

  6. 我的arcgis培训照片6

    来自:http://www.cioiot.com/successview-556-1.html

  7. Redux 中文文档

    http://cn.redux.js.org/docs/introduction/Ecosystem.html

  8. JAVA: 解决is expected to be of type but was actually of type com.sun.proxy.$Proxy的问题

    修改spring-config文件中的transactionManager部分为 <tx:annotation-driven proxy-target-class="true" ...

  9. 基于Wi-Fi的HID注射器，利用WHID攻击实验

    WHID代表基于 Wi-Fi 的 HID 注射器,即对 HID 攻击进行无线化攻击的一种注入工具. 实验攻击原理如下图: 攻击者使用ESP8266作为AP,在自己的电脑创建客户端连接AP.在客户端键入 ...

  10. 杭电 3555 Bomb

    Bomb Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others) Total Subm ...