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 ...
随机推荐
- shift count is too large
STM8S是8 bit单片机在STM8S中 unsigned long是32位, unsigned short和unsigned int都是16位,unsigned char是8位. 以以下代码编译时 ...
- C1FlexGrid双grid滚动条联动
利用AfterScroll事件,来实现双grid联动. private void Grid_AfterScroll(object sender, RangeEventArgs e) { try { i ...
- 记一次virtualbox和夜神模拟器冲突的问题
今天装了夜神模拟器之后发现vbox打不开了,百度了一堆都说要什么重装系统啥的,我这边提示的是 “创建失败(被召者 RC: REGDB_E_CLASSNOTREG (0x80040154))” 先是用管 ...
- OpenCV学习(4)——动态结构
学习一个新知识,无外乎学习它本身和它的工具.OpenCV提供许多内置的结构及处理函数,非常值得学习. 内存存储 在OpenCV中,内存存储器是一个可以用来存储序列.数组和图像的动态增长的数据结构.它由 ...
- 27.rm命令
rm命令可以删除指定的文件或目录.也可以将某个目录及其下属的所有文件及其子目录均删除掉.对于链接文件,只是删除整个链接文件,而原有文件保持不变. 选项:-f:强制删除. -r:递归处理,将指定目录下的 ...
- Next.js 7发布,构建速度提升40%
Next.js团队发布了其开源React框架的7版本.该版本的Next.js主要是改善整体的开发体验,包括启动速度提升57%.开发时的构建速度提升40%.改进错误报告和WebAssembly支持. \ ...
- JS编程建议——11:慎重使用伪数组
建议11:慎重使用伪数组JavaScript没有真正的数组,因此typeof运算符不能辨别数组和对象.伪数组在JavaScript中有很高的易用性,程序员不用给它设置维度,而且永远不用担心产生越界错误 ...
- MySQL必知必会1-20章读书笔记
MySQL备忘 目录 目录 使用MySQL 检索数据 排序检索数据 过滤数据 数据过滤 用通配符进行过滤 用正则表达式进行搜索 创建计算字段 使用数据处理函数 数值处理函数 汇总数据 分组数据 使用子 ...
- 3) drf 框架生命周期 请求模块 渲染模块 解析模块 自定义异常模块 响应模块(以及二次封装)
一.DRF框架 1.安装 pip3 install djangorestframework 2.drf框架规矩的封装风格 按功能封装,drf下按不同功能不同文件,使用不同功能导入不同文件 from r ...
- MODIS系列之NDVI(MOD13Q1)七:时间序列S-G滤波之Python
时间序列S-G滤波之Python 根据上上篇博文(MODIS系列之NDVI(MOD13Q1)五:NDVI处理流程)做出的NDVI.我们求NDVI时间序列图,但该NDVI时序图为地表各土地类型综合的ND ...