Maison > interface Web > js tutoriel > Utilisez js pour obtenir un effet carrousel d'images

Utilisez js pour obtenir un effet carrousel d'images

王林
Libérer: 2020-05-09 09:17:46
avant
2647 Les gens l'ont consulté

Utilisez js pour obtenir un effet carrousel d'images

Processus d'analyse :

Changer d'image :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function changeImg() {
            alert("123")
            var img222 = document.getElementById(img1);

            img222.src = "img/2.jpg";
        }
    </script>
 </head>
<body>
<input type="button" value="点击换图片" onclick="changeImg()">
<img src="img/1.jpg" id="img1">
</body>
</html>
Copier après la connexion

Faites une chose toutes les trois secondes :

window.setInterval (): Appeler une fonction ou calculer une expression en fonction de la période spécifiée (en millisecondes)

setInterval("alert('123')",2000)

window n'a pas besoin d'être écrit, en premier Une variable doit utiliser "", et le "" à l'intérieur doit devenir ''

window.setTimeout() : appeler une fonction ou calculer une expression après un nombre spécifié de millisecondes

fenêtre .clearInterval() :
window.setInterval() méthode ou renvoie un identifiant de type int. Vous pouvez attribuer l'identifiant à window.clearInterval() pour fermer
window.clearTimeout() :

Implémentation de code spécifique :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/* 当页面加载完成的时候, 动态切换图片
				 1.确定事件:
				 2.事件所要触发的函数
			 */
			var index = 1;			//切换图片的函数
			function changeAd(){				//获取要操作的img
				var img = document.getElementById("imgAd");
				img.src = "../img/"+(index%3+1)+".jpg";  //0,1,2    //1,2,3
				index++;
			}			
			function init(){				//启动定时器
				setInterval("changeAd()",3000);
			}
		</script>
	</head>
	<body onload="init()">
		<img src="../img/1.jpg" id="imgAd"/>
	</body>
</html>
Copier après la connexion

Tutoriel recommandé : Tutoriel d'introduction à js

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:cnblogs.com
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