/p>

前端開發

body,

p,

ul,

li,

ol,

dl,

dd,

button,

input,

h1,

h2,

h3,

h4,

h5,

h6{

margin:0;

padding:0;

}

ul,

ol{

list-style:none;

}

a{

text-decoration:none;

}

img{

display:block;

border:none;

}

.clearfix{

zoom:1;

}

.clearfix:after{

display:block;

content:””;

clear:both;

}

#banner-box{

position:relative;

width:800px;

height:373px;

margin:30pxauto0;

overflow:hidden;

font-family:”微軟雅黑”;

}

#bannerli{

position:absolute;

left:0;

top:0;

opacity:0;

filter:alpha(opacity=0);

}

#banner-boximg{

width:1024px;

height:373px;

}

#nav{

position:absolute;

right:80px;

bottom:20px;

z-index:2;

}

#navli{

float:left;

width:20px;

height:20px;

margin:06px;

border-radius:100%;

background:#935B5B;

color:#fff;

text-align:center;

line-height:20px;

font-size:12px;

cursor:pointer;

}

#navli.cur,

#navli:hover{

background:#E91E63;

}

#btndiv{

z-index:2;

position:absolute;

width:40px;

height:60px;

background:#5C2C2C;

top:155px;

opacity:.3;

filter:alpha(opacity=30);

text-align:center;

font-size:40px;

color:white;

cursor:pointer;

display:none;

}

.prev{

left:30px;

}

.next{

right:30px;

}

#banner-boxdiv{

display:block;

}

#banner-box:hoverdiv:hover{

opacity:1;

filter:alpha(opacity=100);

}

1

234

<

總結

以上是生活随笔為你收集整理的HTML5如何制作轮播透明效果,js前端开发实现banner轮播透明切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。