JS实现图片切换效果


Posted in Javascript onNovember 17, 2018

本文实例为大家分享了JS实现图片切换效果的具体代码,供大家参考,具体内容如下

<body>
  <button id="btn1">ON</button>
  <button id="btn2">OFF</button><br>
  <img src="images/0.jpg" alt="" id="pic">
  <script type="text/javascript">
    //获得图片对象
    var pic=document.getElementById('pic');
    var i=0;//图片名称编号 默认显示第一张
    var timer;
    var isTrue=false;//标识是否已经启动了一个定时器 false未启动
    //点击事件
    document.getElementById('btn1').onclick=function(){
        if(isTrue){
          return;//不再启动新的定时器
        }
        timer=setInterval(function(){
          //当到达之最后一张图片时让图片的编号返回到第一张
           if (i==3) {
            i=0;
           }
           i++;
          pic.src='images/'+i+'.jpg';
        },1000);
        isTrue=true;//把定时器改为启动状态
    };
    document.getElementById('btn2').onclick=function(){
      clearInterval(timer);
      isTrue=false;//定时器恢复为为启动状态
    };
  </script>
</body>

实现效果如下:

JS实现图片切换效果

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

Javascript 相关文章推荐
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
js实现导航跟随效果
Nov 17 #Javascript
JavaScript实现新年倒计时效果
Nov 17 #Javascript
JS实现倒计时图文效果
Nov 17 #Javascript
javaScript实现游戏倒计时功能
Nov 17 #Javascript
Javascript实现时间倒计时功能
Nov 17 #Javascript
Javascript实现秒表倒计时功能
Nov 17 #Javascript
js实现简单模态框实例
Nov 16 #Javascript
You might like
Yii CGridView用法实例详解
2016/07/12 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
python实现K最近邻算法
2018/01/29 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
Python谱减法语音降噪实例
2019/12/18 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
学生干部的自我评价分享
2014/01/18 职场文书
结婚周年感言
2014/02/24 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
个人更名证明
2015/06/23 职场文书
DE1103使用报告
2022/04/05 无线电
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技