Home > Article > Web Front-end > Use JS to implement click cycle switching between images (code attached)

Use JS to implement click cycle switching between images (code attached)

php中世界最好的语言Original: 2018-04-18 11:06:132635browse

<!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>
<p>
<!--步骤1：绑定onclick事件-->
<button onclick="nextImg()">下一张</button>
<br />
<!--需自己准备3张图片-->
<img src="img/1.jpg" id="nImg" width="600px" height="400px" />
</p>
</body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Use JS to implement click cycle switching between images (code attached)

Related articles