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 相关文章推荐
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 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
php牛逼的面试题分享
2013/01/18 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
自动更新作用
2006/10/08 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
vue中轮训器的使用
2019/01/27 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
使用Python构建Hopfield网络的教程
2015/04/14 Python
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
python生成excel的实例代码
2017/11/08 Python
python删除不需要的python文件方法
2018/04/24 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
python把1变成01的步骤总结
2019/02/27 Python
python缩进长度是否统一
2020/08/02 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
单位作风建设剖析材料
2014/10/11 职场文书
护理专业自我评价
2015/03/11 职场文书
用电申请报告范文
2015/05/18 职场文书
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL
PHP RabbitMQ消息列队
2022/05/11 PHP