html中js左右图片切换效果,JS实现图片切换效果

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

ON

OFF

//获得图片对象

var pic=document.getElementById('pic');

var i=0;//图片名称编号 默认显示第一张

var timer;

var isTrue=false;//标识是否已经启动了一个定时器 false未启动

//点击事件

document.getElementById('btn1').οnclick=function(){

if(isTrue){

return;//不再启动新的定时器

}

timer=setInterval(function(){

//当到达之最后一张图片时让图片的编号返回到第一张

if (i==3) {

i=0;

}

i++;

pic.src='images/'+i+'.jpg';

},1000);

isTrue=true;//把定时器改为启动状态

};

document.getElementById('btn2').οnclick=function(){

clearInterval(timer);

isTrue=false;//定时器恢复为为启动状态

};

实现效果如下：

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