JS实现图片幻灯片效果代码实例


Posted in Javascript onMay 21, 2020

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

首先准备五张图片

<ul class="imge">
 <li><img src="images/1.jpg" width="400px" height="300px" /></li>
 <li><img src="images/2.jpg" width="400px" height="300px" /></li>
 <li><img src="images/3.jpg" width="400px" height="300px" /></li>
 <li><img src="images/4.jpg" width="400px" height="300px" /></li>
 <li><img src="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() 方法执行完之后,要执行的函数。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
jQuery EasyUi 验证功能实例解析
Jan 06 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 Javascript
Javascript实现秒表计时游戏
May 27 #Javascript
JavaScript实现猜数字游戏
May 20 #Javascript
Vue 打包体积优化方案小结
May 20 #Javascript
vue实现输入框自动跳转功能
May 20 #Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 #Javascript
精读《Vue3.0 Function API》
May 20 #Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 #Javascript
You might like
ZF等常用php框架中存在的问题
2008/01/10 PHP
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
酒吧创业计划书
2014/01/18 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
十佳党员事迹材料
2014/08/28 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
故宫英文导游词
2015/01/31 职场文书
投标单位介绍信
2015/05/05 职场文书
民事代理词范文
2015/05/25 职场文书
详细介绍python操作RabbitMq
2022/04/12 Python