要求：在本文档中的题目下作答，在所写的代码下面粘贴运行后的网页截图，提交本word 文档即可。
小 A 是大四的学生，还有半年就要毕业了，就要跟她暗恋了三年的女神分开了。马上就是女神的生日，他想送给女神一个礼物，能让女神开心并记住他的特别礼物。他想到了电子相册，一个漂亮的网页版电子相册，因为他可以从班级网上找到女神的靓照。上一次制作的网页，女神收到礼物后跟小 A 说她很开心，小 A 也非常高兴，觉得还应该在网页上增加一些小细节，来让女神感受到自己的心意。
1.加一个播放时的数字倒计时，倒计时完了还有下一张，时间永远都用不完。
2.倒计时做成百分比进度条的样式，可以是彩色的，女神一定会喜欢的。
<!DOCTYPE html> <html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>轮播图</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
nav {
width: 720px;
height: 410px;
margin: 20px auto;
overflow: hidden;
position: relative;
}
#index {
position: absolute;
left: 320px;
bottom: 20px;
}
#index li {
width: 8px;
height: 8px;
border: solid 1px gray;
border-radius: 100%;
background-color: #eee;
display: inline-block;
}
#img {
width: 720px;
height: 405px;
}
#img li {
width: 720px;
height: 405px;
position: absolute; /*必须设置为 absolute，否则第一个 li 会把后面的都覆盖*/
z-index: -1;
opacity: 0;
transition: opacity 1s ease-in;
}
#index .on {
background-color: black;
}
#img .opa-on {
opacity: 1;
}
#bar {
width: 720px;
height: 10px;
}
#bar li .progress-bar {
height: 10px;
background: #f5f2eb;
width: 0px;
z-index: 1;
}
</style> </head>
<body>
<nav>
<ul>
<li id="countdown" style="color: aliceblue; margin-bottom: -25px; margin-left: 5px;">3</li>
</ul>
<ul id="index">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="img">
<li class="opa-on">
<img src="img/p1.jpg" alt="img1">
</li>
<li><img src="img/p2.jpg" alt="img2"></li>
<li><img src="img/p3.jpg" alt="img3"></li>
<li><img src="img/p4.jpg" alt="img4"></li>
<li><img src="img/p5.jpg" alt="img5"></li>
</ul>
<ul id="bar">
<li>
<div id="progress-bar" class="progress-bar"></div>
</li>
</ul> </nav>
<script>
function moveImg(list, index) {
for (var i = 0; i < list.length; i++) {
if (list[i].className == "opa-on") {//清除 li 的透明度样式
list[i].className = "";
}
}
list[index].className = "opa-on";
clearTimer()
}
function moveIndex(list, num) {//移动小圆圈
for (var i = 0; i < list.length; i++) {
if (list[i].className == "on") {//清除 li 的背景样式
list[i].className = "";
}
}
list[num].className = "on";
clearTimer()
}
var imgList = document.getElementById("img").getElementsByTagName("li");
var list = document.getElementById("index").getElementsByTagName("li");
var index = 0;
var timer;
var progress;
var countdown;
for (var i = 0; i < list.length; i++) {
list[i].index = i;
list[i].onmouseover = function () {
var clickIndex = parseInt(this.index);
index = clickIndex;
moveImg(imgList, index);
moveIndex(list, index);
clearInterval(timer);
};
list[i].onmouseout = function () {
play();
};
}
var nextMove = function () {
index += 1;
if (index >= 5) {
index = 0
}
moveImg(imgList, index);
moveIndex(list, index);
};
var play = function () {
timer = setInterval(function () {
nextMove();
playBar();
}, 3000);
playBar();
};
play();
function playBar() {
var p = document.getElementById("progress-bar");
p.style.width = 0 + "px";
var i = 0;
progress = setInterval(function () {
i = i + (720 / 300);
p.style.width = i + "px";
if (i >= 720) {
clearInterval(progress)
p.style.width = 0 + "px";
}
}, 10);
var c = document.getElementById("countdown");
var time = 3;
c.innerText = 3 + "";
countdown = setInterval(function () {
time = time - 1;
c.innerText = time + "";
if (time <= 0) {
clearInterval(countdown);
c.innerText = 3 + "";
time = 3;
}
}, 1000)
}
function clearTimer() {
clearInterval(progress)
clearInterval(countdown)
} </script> </body> </html>