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

 更新时间:2020-05-21 09:55:33   作者:佚名   我要评论(0)

其效果是点击图片切换到下一张图片
首先准备五张图片


<ul class="imge">
<li><img src="images/1.jpg" width="400px" height="300px" /></li>
<li><img src="i

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

首先准备五张图片

 <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() 方法执行完之后,要执行的函数。

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

您可能感兴趣的文章:

  • 移动端触屏幻灯片图片切换插件idangerous swiper.js
  • JS实现的多张图片轮流播放幻灯片效果
  • js实现3D图片逐张轮播幻灯片特效代码分享
  • js带点自动图片轮播幻灯片特效代码分享
  • js实现幻灯片播放图片示例代码
  • javascript实现图片切换的幻灯片效果源代码
  • 漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)
  • JS+FLASH幻灯片播放图片脚本,整理了代码,使得调用更加方便!

相关文章

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

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

    其效果是点击图片切换到下一张图片 首先准备五张图片 <ul class="imge"> <li><img src="images/1.jpg" width="400px" height="300px" /></li> <li><img src="i
    2020-05-21
  • Javascript实现秒表计时游戏

    Javascript实现秒表计时游戏

    本文实例为大家分享了javascript实现秒表计时游戏的具体代码,供大家参考,具体内容如下 一、说明 本游戏页面设计分为左右两栏。左上为跑马灯,左下为计时器和”
    2020-05-21
  • Django之富文本(获取内容,设置内容方式)

    Django之富文本(获取内容,设置内容方式)

    富文本 1、Rich Text Format(RTF) 微软开发的跨平台文档格式,大多数的文字处理软件都能读取和保存RTF文档,其实就是可以添加样式的文档,和HTML有很多相似的地方
    2020-05-21
  • 学会python自动收发邮件 代替你问候女友

    学会python自动收发邮件 代替你问候女友

    每天工作忙,学会python自动收发邮件,代替你问候女友 1、相关库介绍 1)yagmail Yet Another GMAIL/SMTP client; 非常方便的SMTP包,超简单的Python发邮件模
    2020-05-21
  • Java飞行记录器JFR功能实现过程图解

    Java飞行记录器JFR功能实现过程图解

    JFR 如果要深入分析问题,可以选择使用内置的Java飞行记录器:Java Mission Control。 转储JFR需要三步: 1. 创建一个包含了你自己配置的JFR模板文件。运行jmc, 然后
    2020-05-21
  • ubuntu18.04 安装qt5.12.8及环境配置的详细教程

    ubuntu18.04 安装qt5.12.8及环境配置的详细教程

    环境 系统:ubuntu18.04 软件:qt5.12.8 一、下载安装包 下载地址http://download.qt.io/archive/qt/5.12/5.12.8/ 点击需要的版本(我们这里选择.run的)会跳
    2020-05-21
  • SpringBoot连接Redis2种模式解析

    SpringBoot连接Redis2种模式解析

    一、引入pom    <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactId> </de
    2020-05-21
  • VMware vCenter 6.7 安装过程(图文教程)

    VMware vCenter 6.7 安装过程(图文教程)

    背景 我本来是要在VMware 官方download 一个6.7的Vcenter,但是除了VMware-VCSA-all-6.7 还看到一个 VMware-VIM-all-6.7 。VCSA 4G大小,VIM 2G大小,所以我两个都下
    2020-05-21
  • python3通过qq邮箱发送邮件以及附件

    python3通过qq邮箱发送邮件以及附件

    本文实例为大家分享了python3通过qq邮箱发送邮件以及附件的具体代码,供大家参考,具体内容如下 开启qq邮箱的smtp服务 代码: import smtplib from email.mime.t
    2020-05-21
  • Python操作Excel把数据分给sheet

    Python操作Excel把数据分给sheet

    需求:根据country列的不同值,将内容分到不同sheet 方法一: 读取原Excel,根据country列将不同的内容放到不同的sheet,并根据国家名称命名,将结果放到新的输出文
    2020-05-21

最新评论