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 相关文章推荐
新浪中用来显示flash的函数
Apr 02 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 Javascript
javascript实现移动端轮播图
Dec 09 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
mysql时区问题
2008/03/26 PHP
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
php实现图片压缩处理
2020/09/09 PHP
javascript 面向对象继承
2009/11/26 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
js实现图片轮播效果
2015/12/19 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
Python中的ctime()方法使用教程
2015/05/22 Python
python中私有函数调用方法解密
2016/04/29 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
flask框架视图函数用法示例
2018/07/19 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
Python对wav文件的重采样实例
2020/02/25 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
Pytorch转tflite方式
2020/05/25 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
军训学生自我鉴定
2014/02/12 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
2014年部门工作总结
2014/11/12 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python