其效果是点击图片切换到下一张图片

首先准备五张图片

 <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实现图片幻灯片效果的更多相关文章

  1. JS实现图片''推拉门''效果

    JS实现图片''推拉门''效果   ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通 ...

  2. js实现图片局部放大效果

    图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积. 如上图,可以看到,这是放大镜的基本效果,主要分成左右两个部分.左边 ...

  3. 3月题外:关于JS实现图片缩略图效果的一些小问题

    由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...

  4. JS中图片飞飞效果

    当鼠标在界面上移动的时候,后面有一连串的图片跟随者一起飘动,效果如下: 实现的基本思想:准备五个img标签,为了方便控制都放在一个div里面,设置div的定位方式为 fixed,设置成这中定位方式主要 ...

  5. 3月题外:关于JS实现图片缩略图效果的一个小问题

    由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...

  6. JS原生选项卡 – 幻灯片效果

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  7. 纯css实现幻灯片效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  8. 使用纯生js实现图片轮换

    效果图预览. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  9. JS实现有点炫的图片展示效果-图片解体和组合

    经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...

随机推荐

  1. shift count is too large

    STM8S是8 bit单片机在STM8S中 unsigned long是32位, unsigned short和unsigned int都是16位,unsigned char是8位. 以以下代码编译时 ...

  2. C1FlexGrid双grid滚动条联动

    利用AfterScroll事件,来实现双grid联动. private void Grid_AfterScroll(object sender, RangeEventArgs e) { try { i ...

  3. 记一次virtualbox和夜神模拟器冲突的问题

    今天装了夜神模拟器之后发现vbox打不开了,百度了一堆都说要什么重装系统啥的,我这边提示的是 “创建失败(被召者 RC: REGDB_E_CLASSNOTREG (0x80040154))” 先是用管 ...

  4. OpenCV学习(4)——动态结构

    学习一个新知识,无外乎学习它本身和它的工具.OpenCV提供许多内置的结构及处理函数,非常值得学习. 内存存储 在OpenCV中,内存存储器是一个可以用来存储序列.数组和图像的动态增长的数据结构.它由 ...

  5. 27.rm命令

    rm命令可以删除指定的文件或目录.也可以将某个目录及其下属的所有文件及其子目录均删除掉.对于链接文件,只是删除整个链接文件,而原有文件保持不变. 选项:-f:强制删除. -r:递归处理,将指定目录下的 ...

  6. Next.js 7发布,构建速度提升40%

    Next.js团队发布了其开源React框架的7版本.该版本的Next.js主要是改善整体的开发体验,包括启动速度提升57%.开发时的构建速度提升40%.改进错误报告和WebAssembly支持. \ ...

  7. JS编程建议——11:慎重使用伪数组

    建议11:慎重使用伪数组JavaScript没有真正的数组,因此typeof运算符不能辨别数组和对象.伪数组在JavaScript中有很高的易用性,程序员不用给它设置维度,而且永远不用担心产生越界错误 ...

  8. MySQL必知必会1-20章读书笔记

    MySQL备忘 目录 目录 使用MySQL 检索数据 排序检索数据 过滤数据 数据过滤 用通配符进行过滤 用正则表达式进行搜索 创建计算字段 使用数据处理函数 数值处理函数 汇总数据 分组数据 使用子 ...

  9. 3) drf 框架生命周期 请求模块 渲染模块 解析模块 自定义异常模块 响应模块(以及二次封装)

    一.DRF框架 1.安装 pip3 install djangorestframework 2.drf框架规矩的封装风格 按功能封装,drf下按不同功能不同文件,使用不同功能导入不同文件 from r ...

  10. MODIS系列之NDVI(MOD13Q1)七:时间序列S-G滤波之Python

    时间序列S-G滤波之Python 根据上上篇博文(MODIS系列之NDVI(MOD13Q1)五:NDVI处理流程)做出的NDVI.我们求NDVI时间序列图,但该NDVI时序图为地表各土地类型综合的ND ...