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. 管理Cookie和Session

    管理Cookie和Session 前言 这几天中,一直再跟漏洞打交道,而在这些漏洞中,出现的最多的就是 Cookie 和 Session 了.这篇文章就简单的介绍一些 Cookie 中最常用的四个属性 ...

  2. fzu 2113 数位dp

    #include<stdio.h> #include<string.h> #define N 20 #define ll __int64 ll dp[N][N];//最多记忆4 ...

  3. [NOIP2007] 提高组 洛谷P1098 字符串的展开

    题目描述 在初赛普及组的“阅读程序写结果”的问题中,我们曾给出一个字符串展开的例子:如果在输入的字符串中,含有类似于“d-h”或者“4-8”的字串,我们就把它当作一种简写,输出时,用连续递增的字母获数 ...

  4. 博弈论入门题 kiki's game

    Problem Description Recently kiki has nothing to do. While she is bored, an idea appears in his mind ...

  5. <项目><day11>查看用户浏览过的商品

    <项目>查看用户浏览过的商品 1.创建一个entity包储存实体对象 1.1创建一个Product的类存储实体对象 对象具有以下属性,并添加set和get方法,含参和不含参的构造方法,to ...

  6. NOIP 2010 机器翻译

    P1540 机器翻译 题目背景 小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章. 题目描述 这个翻译软件的原理很简单,它只是从头到尾,依次将每个英文单词用对应的中文含义来替换.对于 ...

  7. Ext-js使用指南（总结）

    一.获取元素(Getting Elements) 1.Ext.get var el = Ext.get('myElementId');//获取元素,等同于document.getElementById ...

  8. 关于warning

    IT男正吸着雪茄,吐着烟圈.他女朋友生气了发飙道:“你没看见包装盒上的警告(Warning)么?吸烟有害健康!” IT男淡定地回答道:“我是程序员.我们不关心警告,只关心错误.”

  9. CentOS 查看日志命令

    cat tail -f 日 志 文 件 说    明 /var/log/message 系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一 /var/log/secure 与安 ...

  10. kvc VS kvo

    Kvo是Cocoa的一个重要机制,它主要是用于对一个属性的新旧值的监控. 例如说依据A(数 据类)的某个属性值变化,B(view类)中的某个属性做出对应变化.对于MVC,kvo应用的地方很广泛. 使用 ...