Rumah > Artikel > hujung hadapan web > JavaScript教程--点击循环切换图片

JavaScript教程--点击循环切换图片

巴扎黑asal: 2017-09-04 09:49:461866semak imbas

本文通过实例代码给大家介绍了通过js实现点击循环切换图片效果，需要的朋友参考下

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

<!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>

Atas ialah kandungan terperinci JavaScript教程--点击循环切换图片. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JavaScript 面向对象初识Artikel seterusnya：JS底部的新闻滑动特效实现代码（仿万科）

Artikel berkaitan

Lihat lagi