当前位置:党团工作 > 东师《Web前端综合案例开发》离线作业,1

东师《Web前端综合案例开发》离线作业,1

时间:2025-08-03 09:10:28 浏览次数:

 下载文档获取完整

  要求:在本文档中的题目下作答,在所写的代码下面粘贴运行后的网页截图,提交本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=”js/jquery-1.12.4.js”></script> </head> <body> <div class=”silderbox auto”>

 <ul>

  <li id=”img1”><img src=”images/1.jpg”alt=””></li> <li id=”img2”><img src=”images/2.jpg”alt=””></li> <li id=”img3”><img src=”images/3.jpg”alt=””></li> <li id=”img4”><img src=”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>

相关热词搜索: 离线 作业 案例