js实现图片幻灯片效果
其效果是点击图片切换到下一张图片
首先准备五张图片
<ul class="imge">
<li><img src="data:images/1.jpg" width="400px" height="300px" /></li>
<li><img src="data:images/2.jpg" width="400px" height="300px" /></li>
<li><img src="data:images/3.jpg" width="400px" height="300px" /></li>
<li><img src="data:images/4.jpg" width="400px" height="300px" /></li>
<li><img src="data:images/5.jpg" width="400px" height="300px" /></li>
</ul>
样式
.imge li{
position:absolute;/*绝对定位*/
top:10px;
left:10px;
list-style-type:none;}
</style>
js
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//所有图片隐藏
$(".imge li").hide();
//第一张图片淡入
$(".imge li").first().fadeIn("slow"); //单击事件(当前图片淡出,下一张图片淡入)
$(".imge li").click(function(){
var next=$(this).next();
if($(this).index()!=$(".imge li").length-1){
$(this).fadeOut("slow");
next.fadeIn("slow");
}else if($(this).index()==$(".imge li").length-1){
next=$(".imge li").first();
$(this).fadeOut("slow");
next.fadeIn("slow");
}
return false;
});
//注:最后一张图片的判断
//禁止跳转
})
</script>
其中用的是 fadeIn() -> 淡入 和 fadeOut()-> 淡出 两者效果叠加则可用 fadeToggle()
fadeToggle() 方法在 fadeIn() -> 淡入 和 fadeOut()-> 淡出 方法之间切换。
如果元素是淡出显示的,fadeToggle() 会使用淡入效果显示它们。
如果元素是淡入显示的,fadeToggle() 会使用淡出效果显示它们。
三者的语法都是:$(selector).fadeOut / fadeIn / fadeToggle(speed,easing,callback)
其中slow是speed参数("毫秒","slow","fast")
- 毫秒
- "slow"
- "fast"
easing的参数("swing","linear")
- "swing" - 在开头/结尾移动慢,在中间移动快
- "linear" - 匀速移动
callback:
可选。fadeToggle() 方法执行完之后,要执行的函数。
js实现图片幻灯片效果的更多相关文章
- JS实现图片''推拉门''效果
JS实现图片''推拉门''效果 ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通 ...
- js实现图片局部放大效果
图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积. 如上图,可以看到,这是放大镜的基本效果,主要分成左右两个部分.左边 ...
- 3月题外:关于JS实现图片缩略图效果的一些小问题
由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...
- JS中图片飞飞效果
当鼠标在界面上移动的时候,后面有一连串的图片跟随者一起飘动,效果如下: 实现的基本思想:准备五个img标签,为了方便控制都放在一个div里面,设置div的定位方式为 fixed,设置成这中定位方式主要 ...
- 3月题外:关于JS实现图片缩略图效果的一个小问题
由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...
- JS原生选项卡 – 幻灯片效果
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- 纯css实现幻灯片效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- 使用纯生js实现图片轮换
效果图预览. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- JS实现有点炫的图片展示效果-图片解体和组合
经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...
随机推荐
- 深入分析Redis的主从复制机制
一.前言 最近由于疫情影响,时间比较多,所以开始学习之前一直想学,但是却没时间学的Redis.这两天研究了一下Redis的持久化以及主从复制机制,现在已经很晚了,就不多废话了.这篇博客就来谈一谈R ...
- 二叉树中两节点的最近公共父节点(360的c++一面问题)
面试官的问题:写一个函数 TreeNode* Find(TreeNode* root, TreeNode* p, TreeNode* q) ,返回二叉树中p和q的最近公共父节点. 本人反应:当时有点 ...
- 安装和使用redis
我现在只是在window上使用redis在其他平台上暂时没有操作过,如果你有其他好的意见欢迎提出来! 安装redis具体可查看:http://www.runoob.com/redis/redis-in ...
- 微信小程序入门(持续更新)
微信小程序的主要文件介绍: . js:脚本文件 .json:配置文件 .wxss:样式表文件 .wxml:页面 微信小程序差不多也是和mvc模式差不多的,采用数据和页面分离的模式,在js上写的数据可以 ...
- Zabbix3.0安装部署最佳实践
Zabbix介绍 1.1zabbix 简介 Zabbix 是一个高度集成的网络监控解决方案,可以提供企业级的开源分布式监控解决方案,由一个国外的团队持续维护更新,软件可以自由下载使用,运作团队靠提供收 ...
- JDK 14的新特性:instanceof模式匹配
JDK 14的新特性:instanceof模式匹配 JDK14在2020年的3月正式发布了.可惜的是正式特性只包含了最新的Switch表达式,而Records,patterns,text blocks ...
- js之 DOM与BOM
JavaScript HTML DOM (文档对象模型)(Document Object Model) 什么是DOM? DOM是W3C标准. DOM定义了访问文档的标准: “W3C文档对象模型(DOM ...
- Java阻塞队列四组API介绍
Java阻塞队列四组API介绍 通过前面几篇文章的学习,我们已经知道了Java中的队列分为阻塞队列和非阻塞队列以及常用的七个阻塞队列.如下图: 本文来源:凯哥Java(kaigejava)讲解Java ...
- 标准库 xml
xml处理模块 xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,不过,古时候,在json还没诞生的黑暗年代,大家只能选择用xml呀,至今很多传统公司如金融 ...
- MySQL 索引、视图
1.索引 什么是索引 一个索引是存储在表中的数据结构,索引在表的列名上创建.索引中包含了一个列的值,这些值保存在一个数据结构中 索引优缺点 索引大大提高了查询速度 会降低更新表的速度,如对表进行INS ...