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

首先准备五张图片

 <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. testlink配置修改

    1.      Read/write permissions报错 问题: Checking if  /var/testlink/logs/ directory exists [S] </B< ...

  2. Spring Cloud sleuth with zipkin over RabbitMQ教程

    文章目录 Spring Cloud sleuth with zipkin over RabbitMQ demo zipkin server的搭建(基于mysql和rabbitMQ) 客户端环境的依赖 ...

  3. 如何迅速分析出系统CPU的瓶颈在哪里?

    内容出自极客时间专栏<Linux 性能优化实战> CPU 的性能指标那么多,CPU 性能分析工具一抓一大把,换成实际的工作场景,该观察什么指标.选择哪个性能工具呢? 不要担心,今天我就以多 ...

  4. WebStorm 2019 3.3 安装及破解教程附汉化教程

    WebStorm2019 3.3 安装及破解教程附加汉化教程 安装包及破解补丁 链接: https://pan.baidu.com/s/19ATTAW3Tsm0huIJSqYChTw 提取码:1ei7 ...

  5. 码云git本地仓库链接远程仓库

    原文链接: 点我 git提交时,仓库是空的,本地有源码   应该打开cmd   归到项目路径 然后输入git push -u origin master -f 是把本地的项目强制推送到空的仓库 git ...

  6. 上传组件Fine Uploader在ASP.NET中的应用

    现如今,世面上流行着许多前端上传组件,例如:Uploadify(http://www.uploadify.com/),Fine Uploader,等等.这篇博客从头开始,介绍如何在ASP.NET MV ...

  7. 2020年ubuntu1804安装nginx最新稳定版1.16详细教程笔记

    第一次使用nginx是2007年,当时主流还是apache.nginx横空出世,在web2.0的推动下,迅速崛起.眼下已是绝对的主流了. 当时,还有一个轻量级的lighttpd,是德国人写,刚开始还并 ...

  8. JavaScript toFixed() 实现四舍五入保留两位小数

    const num = 18.186; let result; result = num.toFixed(2) console.log(result) // 18.19 注意,返回值为String类型

  9. andorid jar/库源码解析之okio

    目录:andorid jar/库源码解析 Okio: 作用: 说白了,就是一个IO库,基于java原生io.来进行操作,内部做了优化,简洁,高效.所以受到了一部分人的喜欢和使用 栗子: 读写文件. p ...

  10. springboot利用redis实现分布式锁(redis为单机模式)

    1.pom文件添加redis支持 <dependency> <groupId>org.springframework.boot</groupId> <arti ...