编程 Javascript

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实现图片切换效果

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

JS实现图片切换效果

- Author -

wxk_前端开发

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

ExtJs 3.1 XmlTreeLoader Example Error

Feb 09 Javascript

正负小数点后两位浮点数实现原理及代码

Sep 06 Javascript

js之ActiveX控件使用说明 new ActiveXObject()

Mar 03 Javascript

jQuery实现鼠标经过事件的延时处理效果

Aug 20 Javascript

JS实现的论坛Ajax打分效果完整实例

Oct 31 Javascript

javascript每日必学之多态

Feb 23 Javascript

js编写的treeview使用方法

Nov 11 Javascript

BootStrap table删除指定行的注意事项(笔记整理)

Feb 05 Javascript

vue 利用路由守卫判断是否登录的方法

Sep 29 Javascript

jQuery zTree插件使用简单教程

Aug 16 jQuery

jQuery弹框插件使用方法详解

May 26 jQuery

解决js中的setInterval清空定时器不管用问题

Nov 17 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