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. java中装箱与拆箱

    转载自:https://www.cnblogs.com/dolphin0520/p/3780005.html 自动装箱和拆箱问题是Java中一个老生常谈的问题了,今天我们就来一些看一下装箱和拆箱中的若 ...

  2. css伪类实现文字两侧划线效果

    css伪类实现文字两侧划线效果,效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <title> css伪类的学习 & ...

  3. Leetcode 208.实现前缀树

    实现前缀树 实现一个 Trie (前缀树),包含 insert, search, 和 startsWith 这三个操作. 示例: Trie trie = new Trie(); trie.insert ...

  4. codevs1154 能量项链

    题目描述 Description 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对于相邻的两颗珠子 ...

  5. Linux下汇编语言学习笔记11 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  6. Web App 响应式页面制作 笔记整理

    一.移动端种类.分辨率大小 说明: 以主流的iPad.iPhone为例. 工具: Resizer官网: Resizer 用法: 将通栏处写有 “Click or Bookmark”的蓝色按钮拖拽至标签 ...

  7. Core java for impatient 笔记 ch8 流

    流stream 使用了数据视图,让你可以在比集合更高的概念上指定操作使用流,你只需要将操作的调度留给实现,例如,假设你要计算某个属性的平均值,你只需要指定数据源和属性,然后流类库会优化计算,比如使用多 ...

  8. Mycat环境搭建教程收集（待实践）

    先收集,后续再实践. http://blog.csdn.net/dreamcode/article/details/44307377 http://blog.csdn.net/lanonola/art ...

  9. iOS 自己主动释放手动释放混编

    当项目为手动释放时,Build Settings中,Objective-c Automatic Reference Conting 为YES 时,想要手动管理一些文件,在CompileSources中 ...

  10. C#——await与async实现多线程异步编程

    曾经,我们也许用过Thread.在主线程运行的时候.新开还有一个新线程,来运行新方法. 今天看别人发给我的一段代码的时候发现了一个不认识的await,可是又感觉非常熟悉的样子,感觉是线程那块儿的东西, ...