web前端综合案例开发(1)
小A是大四的学生，还有半年就要毕业了，就要跟她暗恋了三年的女神分开了。马上就是女神的生日，他想送给女神一个礼物，能让女神开心并记住他的特别礼物。他想到了电子相册，一个漂亮的网页版电子相册，因为他可以从班级网上到女神的靓照。
1.需要可以循环播放，这样可以多放一些女神的照片。
2.循环播放时要有淡入淡出的效果，衬托出女神仙子般的气质。
1. !__ 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.
web前端可以自学吗
meta http-equiv="__UA-Compatible" content="ie=edge" 8.
title轮播图/title 9.
style type="text/css" 10.
* { 11.
padding: 0; 13.
} 14.
15.
nav { 16.
height: 405px; 18.
position: relative; 21.
} 22.
23.
#index { 24.
position: absolute; 25. left: 320px; 26. bottom: 20px; 27.
28.
} 29.
30.
#index li { 31.
height: 8px; 33. border: solid 1px gray;
34.
border-radius: 100%; 35. } 38.
39.
#img { 40.
height: 405px; 42.
} 43.
44.
#img li { 45.
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.
} 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.
liimg src="img/p2.jpg" alt="img2"/li 78.
liimg src="img/p3.jpg" alt="img3"/li 79.
liimg src="img/p4.jpg" alt="img4"/li 80.
liimg 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 =
var list =
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.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。