3-5 编程练习:jQuery实现简单的图片对应展示效果
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实现简单的图片对应展示效果的更多相关文章
- [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构
写在前面 前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病 ...
- 使用jQuery做简单的图片轮播效果
一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...
- jQuery实现简单的图片淡入淡出效果
整体思路: 1.实现页面布局,设置css样式 2.用jQuery获取需要用到的变量 3.用jQuery为两个按钮绑定事件 一.页面布局: <div class="d1"> ...
- [JQuery]用InsertAfter实现图片走马灯展示效果
写在前面 最近一个搞美工的朋友让我给他写一个图片轮播的特效. 需求: 图片向左循环滚动. 图片滚动到中间高亮显示,并在下方显示照片人物对应的信息. 鼠标悬停止滚动. 鼠标离开开始滚动. 单击图片,图片 ...
- 【三石jQuery视频教程】01.图片循环展示
视频地址:http://v.qq.com/page/e/5/t/e0149n5he5t.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...
- 【三石jQuery视频教程】01.图片循环展示_再次重发
之前的文章,由于在博文的底部放有微信公众号的缘故,被管理员判定为: 您好,您的这篇博文内容本身没什么问题,但是,在博文底部存在推广信息内容.... 你们也没告知到底是哪条触犯了博客园的规矩,我就把底部 ...
- 基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- JQuery简单实现图片轮播效果
很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...
- JQuery实现简单的服务器轮询效果
很多论坛都有进入后,弹出提示,说有多少封邮件没有看,或者是一个oa系统,进入后,提示有多少个任务没有做.每隔一段时间会提示一次,但是如何实现呢.其实,利用jquery的话,会比较简单,核心元素就是js ...
随机推荐
- oracle spool
http://peter8015.iteye.com/blog/2082467 关于SPOOL(SPOOL是SQLPLUS的命令,不是SQL语法里面的东西.) 对于SPOOL数据的SQL,最好要自己定 ...
- HDU 4478 Where is King
题目大意: 一个王可以向周围8个方格走,如果都不通留在原地,t秒后,他可能存在的位置数 这题数据量过大,我们需要通过奇偶性判断,如果t = 0可以到达,说明 t=2,4,6....都可以到达 所以我这 ...
- 深入理解hadoop(三)
Hadoop多用户作业调度器 hadoop 最初是为批处理作业设计的,当时只采用了一个简单的FIFO调度机制分配任务,随着hadoop的普及以及应用的用户越来越多,基于FIFO的单用户调度机制不能很好 ...
- IDEA新手下载及和eclipse,myeclipse的区别
一:下载安装包,我们可以去官网下载.下载地址:http://www.jetbrains.com/idea/download/#secation=windows 二:IDEA的安装: 1.下载安装包后双 ...
- Oracle数据库导入导出简单备份
oracle数据库简单备份 方法一: 1.导出 exp c##xmq/pwda@orcl owner=c##xmq file=C:/expdb.dmp buffer=8000 2.导入 2.1.删除原 ...
- [转]一个完整的Installshield安装程序实例
@import url("http://files.cnblogs.com/files/go-jzg/vs.css"); --> Installshield安装程序实例—基本 ...
- laravel 邮件
本文使用qq邮箱 env邮件配置: MAIL_FROM_ADDRESS = 17******92@qq.com MAIL_FROM_NAME = listen~ MAIL_DRIVER=smtp MA ...
- Word Break II 求把字符串拆分为字典里的单词的全部方案 @LeetCode
这道题相似 Word Break 推断能否把字符串拆分为字典里的单词 @LeetCode 只不过要求计算的并不不过能否拆分,而是要求出全部的拆分方案. 因此用递归. 可是直接递归做会超时,原因是Le ...
- C#如何让Listbox支持多选
把SelectionMode改成MultiExtended
- linux下常用快捷方式
一.终端最常用的快捷键: 1.新建终端窗口:crtl+shift+n 2.终端的切换:shift+左右箭头 3.挂起:crtl+s 4.解除挂起:crtl+q 5.清屏:crtl+l 二.命令行光标移 ...