Maison > interface Web > js tutoriel > le corps du texte

Cycle de clic JS pour passer à la lecture des images

php中世界最好的语言
Libérer: 2018-04-18 14:53:29
original
3495 Les gens l'ont consulté

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>
Copier après la connexion

                                                                          

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal