js图片层叠3D旋转木马轮播
的有关信息介绍如下:js图片层叠3D旋转木马轮播
准备好需要用到的图标。
新建html文档。
书写hmtl代码。
初始化css代码。
html, body { width: 100%; }
ul li { list-style: none; }
* { margin: 0; padding: 0; }
书写css代码。
#box { width: 1200px; margin: 20px auto; }
.slide { height: 500px; position: relative; }
.slide ul { height: 100%; }
.slide li { position: absolute; left: 200px; top: 0; }
.slide li img { width: 100%; }
.arraw { opacity: 0; }
.arraw a { width: 70px; height: 110px; display: block; position: absolute; top: 50%; margin-top: -55px; z-index: 999; }
.next { background: url(image/right.png) no-repeat; right: -10px;/*opacity: .5;*/
/*filter: alpha(opacity=50);*/
}
.prev { background: url(image/left.png) no-repeat; left: -10px; }
代码整体结构。
查看效果。