20秋《web前端综合案例开发》离线作业2Word文档格式.docx

20秋《web前端综合案例开发》离线作业2Word文档格式.docx

《20秋《web前端综合案例开发》离线作业2Word文档格式.docx》由会员分享，可在线阅读，更多相关《20秋《web前端综合案例开发》离线作业2Word文档格式.docx（4页珍藏版）》请在冰点文库上搜索。

UTF-8"

metaname="

viewport"

content="

width=device-width,initial-

scale=1.0"

metahttp-equiv="

X-UA-Compatible"

ie=edge"

title>

轮播图<

/title>

styletype="

text/css"

*{

margin:

0;

padding:

}

nav{

width:

720px;

height:

410px;

20pxauto;

overflow:

hidden;

position:

relative;

#index{

absolute;

left:

320px;

bottom:

20px;

#indexli{

8px;

border:

solid1pxgray;

border-radius:

100%;

background-color:

#eee;

display:

inline-block;

#img{

height:

405px;

#imgli{

/*必须设置为absolute，否则第一个li会把后

面的都覆盖*/

z-index:

-1;

opacity:

transition:

opacity1sease-in;

#index.on{

black;

#img.opa-on{

1;

#bar{

10px;

#barli.progress-bar{

background:

#f5f2eb;

0px;

/style>

/head>

body>

nav>

ul>

liid="

countdown"

style="

color:

aliceblue;

margin-bottom:

-

25px;

margin-left:

5px;

"

3<

/li>

/ul>

ulid="

index"

liclass="

on"

li>

img"

opa-on"

imgsrc="

img/p1.jpg"

alt="

img1"

img/p2.jpg"

img2"

img/p3.jpg"

img3"

img/p4.jpg"

img4"

<

img/p5.jpg"

img5"

bar"

divid="

progress-bar"

class="

/div>

/nav>

script>

functionmoveImg（list,index）{

for（vari=0;

i<

list.length;

i++）{

if（list[i].className=='

opa-on'

）{//清除li的透明度样式

list[i].className='

'

;

list[index].className='

clearTimer（）

functionmoveIndex（list,num）{//移动小圆圈

on'

）{//清除li的背景样式

list[num].className='

varimgList=

document.getElementById（'

img'

）.getElementsByTagName（'

li'

）;

varlist=

index'

varindex=0;

vartimer;

varprogress;

varcountdown;

list[i].index=i;

list[i].onmouseover=function（）{

varclickIndex=parseInt（this.index）;

index=clickIndex;

moveImg（imgList,index）;

moveIndex（list,index）;

clearInterval（timer）;

};

list[i].onmouseout=function（）{

play（）;

varnextMove=function（）{

index+=1;

if（index>

=5）{

index=0

varplay=function（）{

timer=setInterval（function（）{

nextMove（）;

playBar（）;

},3000）;

functionplayBar（）{

varp=document.getElementById（'

progress-bar'

p.style.width=0+"

px"

;

vari=0;

progress=setInterval（function（）{

i=i+（720/300）;

p.style.width=i+"

if（i>

=720）{

clearInterval（progress）

},10）;

varc=document.getElementById（'

countdown'

vartime=3;

c.innerText=3+"

countdown=setInterval（function（）{

time=time-1;

c.innerText=time+"

if（time<

=0）{

clearInterval（countdown）;

time=3;

},1000）

functionclearTimer（）{

clearInterval（countdown）

/script>

/body>

/html>