您的位置：首页 > 党团工作党团工作
东师《Web前端综合案例开发》离线作业,1
2025-08-30人已围观
东师《Web前端综合案例开发》离线作业,1
下载文档获取完整
要求：在本文档中的题目下作答，在所写的代码下面粘贴运行后的网页截图，提交本word文档即可。
小A是大四的学生，还有半年就要毕业了，就要跟她暗恋了三年的女神分开了。马上就是女神的生日，他想送给女神一个礼物，能让女神开心并记住他的特别礼物。他想到了电子相册，一个漂亮的网页版电子相册，因为他可以从班级网上找到女神的靓照。
1.需要可以循环播放，这样可以多放一些女神的照片。
2.循环播放时要有淡入淡出的效果，衬托出女神仙子般的气质。
<!DOCTYPE HTML> <html land=”en”> <head>
<meta charset=”utf-8”>
<title>Wed前端综合训练
02</title> <style type=”text/css”>
*{
margin:0;
padding:0;
list-style:none; }
body{
background: url(images/bj,jpg);
background-size:100%auto;
} .auto{
overflow:hidden; } .silderbox{
width:800px;
height:400px
position:absolute; top:50%; left:50%; margin-top:-200px; margin-top:-400px; border-radius:10px } .silderbox ul{
position: relative; } .silderbox ul li{
overflow:hidden; display:none; position:none; top:0; left:0 } #img1{ display:block; } .silderbox ul li img{
width:800px; height:auto; } </style> <script type=”text/javascript”src=http://www.performandhealth.com/dangtuangongzuo/2022/0818/”js/jquery-1.12.4.js”></script> </head> <body> <div class=”silderbox auto”>
<ul>
<li id=”img1”><img src=http://www.performandhealth.com/dangtuangongzuo/2022/0818/”images/1.jpg”alt=””></li> <li id=”img2”><img src=http://www.performandhealth.com/dangtuangongzuo/2022/0818/”images/2.jpg”alt=””></li> <li id=”img3”><img src=http://www.performandhealth.com/dangtuangongzuo/2022/0818/”images/3.jpg”alt=””></li> <li id=”img4”><img src=http://www.performandhealth.com/dangtuangongzuo/2022/0818/”images/4.jpg”alt=””></li> <ul> </div> <script>
var n=1 function changlmg(x){
for(var i=1;i<5;i++){
if(x==i){
$(“#img+i”).fadeln();
}else{
$(“#img+i”).fadeOut();
}
} } setlnterval(function(){
n++; if(n===5){
n=1 } changlmg(n);
},5000) </script> <body> <html>
相关热词搜索：
离线
作业
案例
下载文档获取完整
要求：在本文档中的题目下作答，在所写的代码下面粘贴运行后的网页截图，提交本word文档即可。
小A是大四的学生，还有半年就要毕业了，就要跟她暗恋了三年的女神分开了。马上就是女神的生日，他想送给女神一个礼物，能让女神开心并记住他的特别礼物。他想到了电子相册，一个漂亮的网页版电子相册，因为他可以从班级网上找到女神的靓照。
1.需要可以循环播放，这样可以多放一些女神的照片。
2.循环播放时要有淡入淡出的效果，衬托出女神仙子般的气质。
<!DOCTYPE HTML> <html land=”en”> <head>
<meta charset=”utf-8”>
<title>Wed前端综合训练
02</title> <style type=”text/css”>
*{
margin:0;
padding:0;
list-style:none; }
body{
background: url(images/bj,jpg);
background-size:100%auto;
} .auto{
overflow:hidden; } .silderbox{
width:800px;
height:400px
position:absolute; top:50%; left:50%; margin-top:-200px; margin-top:-400px; border-radius:10px } .silderbox ul{
position: relative; } .silderbox ul li{
overflow:hidden; display:none; position:none; top:0; left:0 } #img1{ display:block; } .silderbox ul li img{
width:800px; height:auto; } </style> <script type=”text/javascript”src=http://www.performandhealth.com/dangtuangongzuo/2022/0818/”js/jquery-1.12.4.js”></script> </head> <body> <div class=”silderbox auto”>
<ul>
<li id=”img1”><img src=http://www.performandhealth.com/dangtuangongzuo/2022/0818/”images/1.jpg”alt=””></li> <li id=”img2”><img src=http://www.performandhealth.com/dangtuangongzuo/2022/0818/”images/2.jpg”alt=””></li> <li id=”img3”><img src=http://www.performandhealth.com/dangtuangongzuo/2022/0818/”images/3.jpg”alt=””></li> <li id=”img4”><img src=http://www.performandhealth.com/dangtuangongzuo/2022/0818/”images/4.jpg”alt=””></li> <ul> </div> <script>
var n=1 function changlmg(x){
for(var i=1;i<5;i++){
if(x==i){
$(“#img+i”).fadeln();
}else{
$(“#img+i”).fadeOut();
}
} } setlnterval(function(){
n++; if(n===5){
n=1 } changlmg(n);
},5000) </script> <body> <html>
相关热词搜索：
离线
作业
案例
上一篇：东奥会直播观后感 2021东京奥运会00后夺冠心得【3篇】
下一篇：东方红主持词