Maison  >  Article  >  interface Web  >  Cycle de clic JS pour passer à la lecture des images

Cycle de clic JS pour passer à la lecture des images

php中世界最好的语言
php中世界最好的语言original
2018-04-18 14:53:293451parcourir

Cette fois je vous apporterai les images qui peuvent être jouées en boucle en cliquant sur le bouton JS Quelles sont les précautions pour les

images. qui peut être joué en boucle en cliquant sur le bouton JS. Voici un cas pratique. Jetons un coup d'oeil.
<!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>

                                                                          

Lecture recommandée :

Utiliser js pour implémenter un saut intra-page

JS pour implémenter un système d'évaluation à choix multiples

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn