要求：在本文档中的题目下作答，在所写的代码下面粘贴运行后的网页截图，提交本word文档即可。
小A是大四的学生，还有半年就要毕业了，就要跟她暗恋了三年的女神分开了。马上就是女神的生日，他想送给女神一个礼物，能让女神开心并记住他的特别礼物。他想到了电子相册，一个漂亮的网页版电子相册，因为他可以从班级网上找到女神的靓照。
1.需要可以循环播放，这样可以多放一些女神的照片。
2.循环播放时要有淡入淡出的效果，衬托出女神仙子般的气质。
1. <!DOCTYPE html> 2. <html lang="zh_CN"> 3.
4. <head> 5.
<meta charset="UTF-8"> 6.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 7.
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 8.
<title>轮播图</title> 9.
<style type="text/css"> 10.
* { 11.
margin: 0; 12.
padding: 0; 13.
} 14.
15.
nav { 16.
width: 720px; 17.
height: 405px; 18.
margin: 20px auto; 19.
overflow: hidden; 20.
position: relative; 21.
} 22.
23.
#index { 24.
position: absolute; 25.
left: 320px; 26.
bottom: 20px; 27.
28.
} 29.
30.
#index li { 31.
width: 8px; 32.
height: 8px; 33.
border: solid 1px gray;
34.
border-radius: 100%; 35.
background-color: #eee; 36.
display: inline-block; 37.
} 38.
39.
#img { 40.
width: 720px; 41.
height: 405px; 42.
} 43.
44.
#img li { 45.
width: 720px; 46.
height: 405px; 47.
position: absolute; /*必须设置为 absolute，否则第一个 li 会把后面的都覆盖*/ 48.
z-index: -1; 49.
opacity: 0; 50.
transition: opacity 1s ease-in; 51.
} 52.
53.
#index .on { 54.
background-color: black; 55.
} 56.
57.
#img .opa-on { 58.
opacity: 1; 59.
} 60.
</style> 61. </head> 62.
63. <body> 64.
65. <nav> 66.
<ul id="index"> 67.
<li class="on"></li> 68.
<li></li> 69.
<li></li> 70.
<li></li> 71.
<li></li> 72.
</ul> 73.
<ul id="img"> 74.
<li class="opa-on"> 75.
<img src="img/p1.jpg" alt="img1"> 76.
</li>
77.
<li><img src="img/p2.jpg" alt="img2"></li> 78.
<li><img src="img/p3.jpg" alt="img3"></li> 79.
<li><img src="img/p4.jpg" alt="img4"></li> 80.
<li><img src="img/p5.jpg" alt="img5"></li> 81.
</ul> 82. </nav> 83.
84. <script> 85.
function moveImg(list, index) { 86.
for (var i = 0; i < list.length; i++) { 87.
if (list[i].className == "opa-on") {//清除 li 的透明度样式 88.
list[i].className = ""; 89.
} 90.
} 91.
list[index].className = "opa-on"; 92.
} 93.
94.
function moveIndex(list, num) {//移动小圆圈 95.
for (var i = 0; i < list.length; i++) { 96.
if (list[i].className == "on") {//清除 li 的背景样式 97.
list[i].className = ""; 98.
} 99.
} 100.
list[num].className = "on"; 101.
} 102.
103.
var imgList = document.getElementById("img").getElementsByTagName("li"); 104.
var list = document.getElementById("index").getElementsByTagName("li"); 105.
var index = 0; 106.
var timer; 107.
108.
for (var i = 0; i < list.length; i++) {//鼠标覆盖上哪个小圆圈，图片就移动到哪个小圆圈，并停止 109.
list[i].index = i; 110.
list[i].onmouseover = function () { 111.
var clickIndex = parseInt(this.index); 112.
index = clickIndex; 113.
114.
moveImg(imgList, index); 115.
moveIndex(list, index); 116.
clearInterval(timer); 117.
}; 118.
list[i].onmouseout = function () {//移开后继续轮播
119.
play(); 120.
}; 121.
122.
} 123.
124.
var nextMove = function () { 125.
index += 1; 126.
if (index >= 5) { 127.
index = 0 128.
} 129.
moveImg(imgList, index); 130.
moveIndex(list, index); 131.
}; 132.
var play = function () { 133.
timer = setInterval(function () { 134.
nextMove(); 135.
}, 3000); 136.
}; 137.
play(); 138. </script> 139. </body> 140. </html>
相关热词搜索： 案例 开发 综合