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 相关文章推荐
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
vue 解决异步数据更新问题
Oct 29 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 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
php5 pdo新改动加载注意事项
2008/09/11 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
js中生成map对象的方法
2014/01/09 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
React 组件间的通信示例
2018/06/14 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
基于python 字符编码的理解
2017/09/02 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Python的历史与优缺点整理
2020/05/26 Python
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
银行优秀员工事迹
2014/02/06 职场文书
python pyhs2 的安装操作
2021/04/07 Python
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android