最簡單的輪播圖實現
阿新 • • 發佈：2018-11-11
需求：每隔2秒切換一張圖片的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<style type="text/css"></style>
<script type="text/javascript">
//設定定時器
window.setInterval("changeImage()",2000);
var count =1; //在呼叫函式的時候0.jpg已經顯示，如果num=0，那麼在執行下面函式時，0.jpg會再次顯示2秒
//設定尋找圖片的函式
function changeImage() {
var img = document.getElementById("img");//img物件就相當於img標籤
if (count < 5) {
img.src = "img/" + count + ".jpg";
count++;
}else {
count= 0;
changeImage();
}
}
</script>
</head>
<body>
<img src="img/0.jpg" id="img" width="600px" height="400px"/>
</body>
</html>