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. Jmeter关联,正则表达式提取器使用2

    正则表达式的用处很多,最基础的用法 1,断言 2,传参(关联) 例子 1.http请求 2正则表达式提取,想要提取列表列中id,一遍打开列表页 如果是1,每次就会取相同的值!匹配数字的权限高于模板$0 ...

  2. c语音 dll断点调试方法

    转自:https://blog.csdn.net/qingzai_/article/details/45348613 dll调试方法: 1.把最新生成的dll和pdb放到 启动这个dll 的进程目录下 ...

  3. 63.JPA/Hibernate/Spring Data概念【从零开始学Spring Boot】

    [从零开始学习Spirng Boot-常见异常汇总] 事情的起源,无意当中在一个群里看到这么一句描述:"有人么?默默的问一句,现在开发用mybatis还是hibernate还是jpa&quo ...

  4. [luoguP1868] 饥饿的奶牛（DP）

    传送门 先把所有区间按照左端点排序 f[i]表示区间0~i的最优解 #include <cstdio> #include <iostream> #include <alg ...

  5. bzoj1834 网络扩容 网络流

    好久没写题解了啊··· 题目大意: 给你一幅n个点的网络,先求出其1到n的最大流,每条弧还会有个属性\(cost_i\),表示没扩容一个单位的费用,现在我们要求的就是扩容K个单位的最小费用 思路: 这 ...

  6. 【NOIP2017练习】函数变换（DP，dfs）

    题意: 思路: 极限步数大概不会超过30 ; ..max,..]of longint; eul:..max]of longint; cas,v,n,k,i,ans,j:longint; functio ...

  7. 3.2 符号表之二叉查找树BST

    一.插入和查找 1.二叉查找树(Binary Search Tree)是一棵二叉树,并且每个结点都含有一个Comparable的键,保证每个结点的键都大于其左子树中任意结点的键而小于其右子树的任意结点 ...

  8. poj-1979 && hdoj - 1312 Red and Black (简单dfs)

    http://poj.org/problem?id=1979 基础搜索. #include <iostream> #include <cstdio> #include < ...

  9. Perfect Service UVA - 1218

    #include<iostream> #include<cstdio> #include<cmath> #include<cstring> #inclu ...

  10. P1665 正方形计数

    P1665 正方形计数 题目描述 给定平面上N个点,你需要计算以其中4个点为顶点的正方形的个数.注意这里的正方形边不一定需要和坐标轴平行. 输入输出格式 输入格式: 第一行一个数X,以下N个点的坐标. ...