下载文档获取完整
要求:在本文档中的题目下作答,在所写的代码下面粘贴运行后的网页截图,提交本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>
相关热词搜索: 离线 作业 案例