本文主要详细介绍基于JavaScript的图像切换效果。
本文中的示例代码非常详细,具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享JS实现图片切换效果的具体代码,供大家参考。具体内容如下
身体
按钮id=btn1ON/button
button id=btn2OFF/buttonbr
img src= images/0 . jpg alt= id= pic
脚本类型=文本/javascript
//获取图片对象
var pic=document . getelementbyid( pic );
var I=0;//默认情况下,图像名称编号显示第一张图像。
var定时器;
var isTrue=false//标识计时器是否已经启动。false未开始
//点击事件
document.getElementById(btn1 )。onclick=function(){
if(isTrue){
返回;//不再启动新的计时器
}
timer=setInterval(function(){
//当到达的最后一张图片时,让图片的编号返回到第一张。
if (i==3) {
I=0;
}
我;
pic.src=images/ i 。jpg ;
},1000);
isTrue=true//将计时器更改为开始状态。
};
document.getElementById(btn2 )。onclick=function(){
clearInterval(定时器);
isTrue=false//定时器恢复到启动状态。
};
/脚本
/body
实现效果如下:
这就是本文的全部内容。希望对大家的学习有帮助,支持我们。