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学习笔记8 用JSON做原型
Jan 11 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
js精度溢出解决方案
Dec 02 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
浅谈Vue响应式(数组变异方法)
May 07 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
PHP运行模式汇总
2016/11/06 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
PHP实现简易计算器功能
2020/08/28 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
详解python调用cmd命令三种方法
2019/07/08 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
Python 实现try重新执行
2019/12/21 Python
opencv python图像梯度实例详解
2020/02/04 Python
python 实现批量图片识别并翻译
2020/11/02 Python
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
党章学习思想汇报
2014/01/14 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
建筑安全标语
2014/06/07 职场文书
起诉书格式范文
2015/05/20 职场文书
对学校的意见和建议
2015/06/04 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
python - asyncio异步编程
2021/04/06 Python
golang在GRPC中设置client的超时时间
2021/04/27 Golang