核心思想:轮播图,其实就是想要网页显示不同图片,只需要切换图片的src属性就可以了。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
body{
text-align: center;
background-color: black;
}
</style>
</head>
<body>
<img src="img/0.jpg" width="700" id="one"/>
<script type="text/javascript">
var i = 1;
function changePicture() {
// 修改src属性
document.getElementById("one").src = "img/"+i+".jpg";
i++;
// 一共五张图,重复播
if (i == 5) {
i=0;
}
}
//每过1.5秒调用1次上面函数,时间单位是:毫秒
window.setInterval("changePicture()",1500);
</script>
</body>
</html>