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. 【进击后端】linux安装最新版nodejs

    nodejs下载:https://nodejs.org/zh-cn/download/ 1.cd /root/download 2.wget https://nodejs.org/dist/v6.11 ...

  2. [bzoj2443][Usaco2011 Open]奇数度数_树形dp_生成树_并查集

    奇数度数 bzoj-2443 Usaco-2011 Open 题目大意:给定一个n个点m条便有向图,问是否有一种选出一些边的方式使得所有点的度数都是奇数. 注释:$1\le n \le 5\cdot ...

  3. Ubuntu 16.04下减小/释放/清理VirtualBox虚拟硬盘文件的大小

    一般在VirtualBox中安装Windows,然后用无缝模式进行某些特定软件的使用. 而VirtualBox的虚拟硬盘会越用越大,并且VirtualBox没有自带清理工具,相比VMware来说,VM ...

  4. Ubuntu 16.04粘贴板增强工具Diodon

    相比Parcellite(http://www.cnblogs.com/EasonJim/p/7119308.html),Diodon可以支持图片. 安装: sudo add-apt-reposito ...

  5. SQLServer2008 快捷键集合

    CTRL       +       SHIFT       +       B                 生成解决方案           CTRL       +       F7     ...

  6. webpack 输出多个文件

    http://react-china.org/t/webpack/1870/2 webpack 文章 entry = { "button": "demo/button/i ...

  7. 使用nginx+nginx-rtmp-module+ffmpeg搭建流媒体server笔记（十）

    第十部分 -- 开发板測试 前几天已经分别将nginx和ffmpeg移植到了开发板上面.可是还是没有进行不论什么的測试并不知道移植后的效果怎样. 今天分别做了两个測试.证明移植的结果是可用的. 1.測 ...

  8. AutoCAD如何倒角 倒圆角 倒直角

    倒圆角:输f 再输r 再输入你想倒的半径,然后选相邻的两边倒直角:输chamfer 再输d 再输你想倒的距离,然后先相邻的两边 祝你成功

  9. 慎用Outline ,UGUI Outline实现原理分析

    使用 UGUI 制作背包的时候.同事发现假设背包中加入了大量的物品.比方两百个.Unity就会出错,提示 Canvas element contains more than 65535 vertice ...

  10. iOS自己定义返回button(不影响返回手势)

    此方法能够自己定义返回button,且不影响返回手势. 新方法: self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] in ...