欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用JavaScript实现点击循环切换图片效果

程序员文章站 2022-09-08 10:24:53
废话不多说了,直接给大家贴代码了,具体代码如下所述: <...

废话不多说了,直接给大家贴代码了,具体代码如下所述:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>单击循环切换图片</title>
<script>
var i = 1;
function nextimg(){
i++;
//步骤2:获取页面元素
var next = document.getelementbyid("nimg");
//步骤3:更改元素的src属性
next.src = "img/"+i+".jpg";
if(i==3){
i=0;
} 
}
</script>
</head>
<body>
<div>
<!--步骤1:绑定onclick事件-->
<button onclick="nextimg()">下一张</button>
<br />
<!--需自己准备3张图片-->
<img src="img/1.jpg" id="nimg" width="600px" height="400px" />
</div>
</body>
</html> 

总结

以上所述是小编给大家介绍的使用javascript实现点击循环切换图片效果,希望对大家有所帮助