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弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
下拉框select的绑定示例
Sep 04 Javascript
js动态切换图片的方法
Jan 20 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
Vue响应式原理详解
Apr 18 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
Python解惑之整数比较详解
2017/04/24 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
Pygame框架实现飞机大战
2020/08/07 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
个人主要事迹材料
2014/08/26 职场文书
初中教师个人总结
2015/02/10 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
离婚案件被告代理词
2015/05/23 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
2019思想汇报范文
2019/05/21 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
Python基础之条件语句详解
2021/06/16 Python