一个img标签,一个函数,一个定时器完成轮播图
效果展示
主要代码
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>turnPhoto2</title>
<link rel="stylesheet" href="css/turnPhoto2.css">
</head>
<body>
<img src="image/8.jpg" id="photo">
<script src="js/turnPhoto2.js"></script>
</body>
</html>
CSS
body
{
padding: 0;
margin:0;
background-color: #C7EDCC;
}
#photo
{
width: 100%;
height: 100%;
position: absolute;
top:0px;
left:0px;
}
JavaScript
let Maximum = 8;
let index = 1;
let photo =window.document.getElementById("photo");
function turn() {
if (index > Maximum) {
index = 1;
}
photo.setAttribute("src","image/"+index+".jpg");
index++;
}
setInterval(turn, 2000);
玩JavaScript的感受
细心,耐心 习惯培养起来还真地有点寸!
还得有点恒心
|