Heim > Artikel > Web-Frontend > Verwenden Sie js, um einen Bildkarusselleffekt zu erzielen
Verwenden Sie js, um einen Bildkarusselleffekt zu erzielen
- 王林nach vorne
- 2020-05-09 09:17:462524Durchsuche
Analyseprozess:
Bild wechseln:
<!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>Alle drei Sekunden eine Sache ausführen:
window.setInterval (): Rufen Sie eine Funktion oder einen Berechnungsausdruck gemäß dem angegebenen Zeitraum (in Millisekunden) auf.
setInterval("alert('123')",2000)
Fenster muss nicht geschrieben werden, das erste Eine Variable muss „“ verwenden und das „“ darin muss zu „
window.setTimeout()“ werden: Rufen Sie eine Funktion auf oder berechnen Sie einen Ausdruck nach einer angegebenen Anzahl von Millisekunden
window .clearInterval( ):
window.setInterval()-Methode oder gibt eine ID vom Typ int zurück. Sie können die ID window.clearInterval() zuweisen, um
window.clearTimeout() zu schließen:
Spezifische Code-Implementierung:
<!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>Empfohlenes Tutorial: js-Einführungs-Tutorial
Das obige ist der detaillierte Inhalt vonVerwenden Sie js, um einen Bildkarusselleffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!